D3.js Force Layout - showing only part of a graph

Question

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 no

Answer 1

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

http://justdharma.com/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 ...

Answer 2

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, compute 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 computation 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.