CODEWITHSUNDEEP
javascriptcytoscape.js
Victor
Victor

Reputation: 5363

Expand nodes on click in cytoscape js

I have a graph of people who interact with each other.

The graph is quite messy since everybody interacts with each other. What I need is:

  1. Display the "main" person in the center
  2. Display only the first level of interactions
  3. When the user clicks on a node toggle its children visibility (without displaying children of children)

I've read about compound nodes, but the thing is that one node (person) can have many parents and it's not supported in Cytoscape.

This is what it should look like. The red circle is the "main" person. The red rectangle is the first level of interactions. The rest should be hidden till the user clicks on a node, which reveals its direct children.

enter image description here

The only idea I got is to manipulate the data I provide for the chart. Right now I have an array of vertices and edges. Edges have source/target. So I probably can handle it in javascript by manipulating these arrays.

But is it possible to somehow simplify the process?

Upvotes: 1

Views: 1125

Answers (1)

Hasan Balcı
Hasan Balcı

Reputation: 1088

You can use view-utilities extension of cytoscape.js which provides hide/show functionality. See its API that has hide, show and showHiddenNeighbors functions. You can also play with its demo here.

Upvotes: 4

Related Questions