How can I append text to and render that text from a line in a force directed graph in D3.js?

Question

I\'m trying to learn how to use the force.layout features in D3.js and have been building a \"Force Directed Radial Graph\".

I\'ve been able to successfully append a

Answer 1

The sample already shows how to add text to the edges. Here is the relevant piece of code:

      // Append text to Link edges
  var linkText = svgCanvas.selectAll(".gLink")
      .data(force.links())
    .append("text")
  .attr("font-family", "Arial, Helvetica, sans-serif")
  .attr("x", function(d) {
      if (d.target.x > d.source.x) { return (d.source.x + (d.target.x - d.source.x)/2); }
      else { return (d.target.x + (d.source.x - d.target.x)/2); }
  })
      .attr("y", function(d) {
      if (d.target.y > d.source.y) { return (d.source.y + (d.target.y - d.source.y)/2); }
      else { return (d.target.y + (d.source.y - d.target.y)/2); }
  })
  .attr("fill", "Maroon")
      .style("font", "normal 12px Arial")
      .attr("dy", ".35em")
      .text(function(d) { return d.linkName; });