Good morning,

just starting with the awesome d3js library ...

I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it bees the "new" center node and a different "subgraph" is displayed. I wonder if there is an example around implementing this kind of subgraph layout and if some kind of a "node-distance" algorithm is already implemented in d3js.

Thanks a lot

martin

UPDATE: Just found the example Modifying a Force Layout which illuminates how to add and remove nodes and edges from a force directed layout.

Good morning,

just starting with the awesome d3js library ...

I want to show only a portion of a graph with the force directed layout. The idea is to have one node declared as the "center" and show all nodes within a distance of two (for example) from this center node, the neighbors of the center node and the neighbors of the neighbors. If the user clicks on one of the displayed nodes it bees the "new" center node and a different "subgraph" is displayed. I wonder if there is an example around implementing this kind of subgraph layout and if some kind of a "node-distance" algorithm is already implemented in d3js.

Thanks a lot

martin

UPDATE: Just found the example Modifying a Force Layout which illuminates how to add and remove nodes and edges from a force directed layout.

• javascript
• d3.js
• visualization
• force-layout

Share Improve this question Follow edited Jan 19, 2014 at 14:25 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Sep 11, 2013 at 21:58 dorjeduckdorjeduck 7,8041111 gold badges5353 silver badges6868 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I just uploaded a "proof of concept level" of an interactive force directed subgraph.

http://justdharma./d3/sub-graph/

In this example I use backbonejs under the hood. Being the first time I implement something with backbonejs, I for sure use it in a very crude manner. While this example might illuminate one way how an interactive sub-graph can be achieved it is for sure not a template how to do it - as said just a proof of concept hack ...

This isn't implemented in D3, and I'm not aware of any examples. What you would have to do is the following:

• Set the fixed attribute of the new center node to true to prevent the force layout from changing its position.
• Set the px and py attributes of that same node to the center position.
• For each node in your force layout, pute the shortest path to the new center node.
• Depending on the length of the path in each case, either remove the node or keep it.

The trickiest part here is the putation of the path from each node to the new center, but even this is a pretty standard algorithmic problem. Another thing to keep in mind is that you need to modify the data structures that contain the nodes and links of the force layout in place, i.e. you can't set new nodes and links for the force layout and expect everything to work smoothly.