D3 Force Layout - No overlapping links

Question

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();

Answer 1

As Lars Kotthoff stated it can be done manually (I found http://bl.ocks.org/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 compared 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; })

Answer 2

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

Eg: http://bl.ocks.org/couchand/7190660