d3.js: suggested node position in force layout

d3.js force-layout
duckworthd picture duckworthd · Jul 9, 2012 · Viewed 8.2k times · Source

I would like to create a graph where nodes have suggested positions, but I would also like to use the force layout to ensure the nodes themselves don't overlap. Is this possible in d3?

Answer

mbostock picture mbostock · Jul 11, 2012

Yes, you can do this by:

  • Disabling the default gravity and charge forces.
  • Implementing collision detection.
  • Implementing "custom" gravity that attracts each node to its suggested position.

Here's a live example:

Similar techniques were used in Shan Carter's visualization of Obama's 2013 budget proposal, which are further discussed in a tutorial by Jim Vallandingham.

Related questions

How do I remove all children elements from a node and then apply them again with different color and size?

So I have the next force layout graph code for setting nodes, links and other elements: var setLinks = function () { link = visualRoot.selectAll("line.link") .data(graphData.links) .enter().append("svg:line") .attr("class", "link") .style("stroke-width", function (d) { return nodeStrokeColorDefault; }) .…

Read More
Fix Node Position in D3 Force Directed Layout

I want some of the nodes in my force-directed layout to ignore all forces and stay in fixed positions based on an attribute of the node, while still being able to be dragged and exert repulsion on other nodes and …

Read More
Is there a way to zoom into a D3 force layout graph?

D3 has a force directed layout here. Is there a way to add zooming to this graph? Currently, I was able to capture the mouse wheel event but am not really sure how to write the redraw function itself. Any …

Read More