I have a D3 visualization with nodes using the force-layouts as seen below. Some of the lines cross each other, which makes the visualization more difficult to understand. How can I ensure that the lines do not overlap?

I've tried modifying the parameters of the force-layout (charge, friction, gravity), but without any luck. The current code is below. Perhaps I need to do something other than modifying the force-layout to achieve the result?

force = d3.layout.force()
              .nodes(data_nodes)
              .links(data_links)
              .charge(-3000)0
              .friction(0.6)
              .gravity(0.6)
              .size([width,height])
              .start();

I have a D3 visualization with nodes using the force-layouts as seen below. Some of the lines cross each other, which makes the visualization more difficult to understand. How can I ensure that the lines do not overlap?

I've tried modifying the parameters of the force-layout (charge, friction, gravity), but without any luck. The current code is below. Perhaps I need to do something other than modifying the force-layout to achieve the result?

force = d3.layout.force()
              .nodes(data_nodes)
              .links(data_links)
              .charge(-3000)0
              .friction(0.6)
              .gravity(0.6)
              .size([width,height])
              .start();

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

• You can't. The force layout implemented in D3 doesn't even consider whether links overlap or not. – Lars Kotthoff Commented Mar 20, 2015 at 9:41
• Could I do it some other way? Like finding overlapping links and moving the nodes correspondingly? Or would that mess with the force layout? – pir Commented Mar 20, 2015 at 9:51
• You can certainly do it yourself, but it's not going to be straightforward. – Lars Kotthoff Commented Mar 20, 2015 at 10:01

2 Answers 2

As Lars Kotthoff stated it can be done manually (I found http://bl.ocks/mbostock/3231298#index.html as inspiration), but actually it could be done a lot simpler if I just changed the force-layout a bit.

If I let the central node have a quite strong charge pared to the remaining nodes, they will align nicely in a circle around the node, removing any overlaps:

.charge(function(d, i) { return i==0 ? -10000 : -500; })

You can put extra nodes on the edges to reduce overlap.

E.g: http://bl.ocks/couchand/7190660