Adding Text Labels To Force Directed Graph Links In D3.js

I am having trouble adding a text to the links that connect the nodes in the following D3JS connected node graph: http://jsfiddle.net/rqa0nvv2/1/ Could anyone please explain to me

Solution 1:

Just a couple changes are needed to get the text attached to the edges.

First, the problem with your current method is that you are shoving the <text> inside the <line>. This just can't be done in SVG, so you need to create a <g> (group) to contain both the line and the text:

var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("g")
  .attr("class", "link-group")
  .append("line")
  .attr("class", function(d) { return d.value == "visible" ? "link" : ""; })
  .style("stroke-width", function(d) { returnMath.sqrt(d.stroke); });

Ok, just adding this won't change anything visually, but it does create the groups that we need. So we need to add the text with something like:

var linkText = svg.selectAll(".link-group")
  .append("text")
  .data(force.links())
  .text(function(d) { return d.value == "visible" ? "edge" : ""; })
  .attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
  .attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); })
  .attr("dy", ".25em")
  .attr("text-anchor", "middle");

This adds the text and initially positions it. Feel free (please!) style the text and change the content according to how you want it to look. Finally, we need to make it move with the force-directed graph:

force.on("tick", function() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  node
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

  linkText
    .attr("x", function(d) { return (d.source.x + (d.target.x - d.source.x) * 0.5); })
    .attr("y", function(d) { return (d.source.y + (d.target.y - d.source.y) * 0.5); });
});

Which is simple of course since it's the same thing that we already did!