How to add label to edges in d3 graph

Question

Please see http://bl.ocks.org/rkirsling/5001347

It shows some nodes and the edges between them. Can you tell what code to add in that and where so that the edges have labels. You can assume any suitable location for the labels and you can also assume any label text. Thank you.

Answer 1

You can add labels just as you add the paths for the links themselves. All you need to do is calculate the position according to the positions of the two nodes the link connects. The code would look something like this.

svg.selectAll("text").data(links).enter()
   .append("text")
   .attr("x", function(d) { return d.source.x + (d.target.x - d.source.x)/2; })
   .attr("y", function(d) { return d.source.y + (d.target.y - d.source.y)/2; })
   .text(function(d) { return d.something; });

Note that in your tick function, you would also need to update the position of the labels.