If your graph doesn't have too many nodes, you can fake it. Just insert one or more nodes for each link, and set their position along the link in the tick handler. Check out for an example, but the changes to Mike Bostock's version amount to basically just:

var linkNodes = [];

graph.links.forEach(function(link) {
    source: graph.nodes[link.source],
    target: graph.nodes[]


// force.on('tick', function() {
linkNodes.forEach(function(node) {
  node.x = (node.source.x + * 0.5;
  node.y = (node.source.y + * 0.5;

This will introduce a pretty serious performance overhead if you have very many nodes and edges, but if your graph doesn't get much larger than your example it would hardly be noticed.

You may also want to fiddle with the relative force of the real nodes versus the link nodes.

Take this one step further and you get the nice curved links of

Related Query

More Query from same tag