title: How can I add text to edges in a force directed graph d3?
body: <p>I want to be able to add text along the sides of my edges between nodes. However, the way that I was able to display text on top of my nodes doesn't seem to work for adding text to the edges. How do I go about this? Is there a different approach I should be trying? </p>
  
  <p>I've looked extensively into other threads regarding this issue but I can't seem to understand why my code isn't working / get theirs to work on my graph. I'm a beginner to d3 and Javascript so maybe I'm overlooking something simple. </p>
  
  <p>A link to my code can be found here: <a href="https://jsfiddle.net/obe02/zxva4f5r/" rel="nofollow noreferrer">https://jsfiddle.net/obe02/zxva4f5r/</a></p>
  
  <pre><code>  // update existing links
    path.classed("selected", (d) =&gt; d === selectedLink)
        .style("marker-start", function(d) {return getMarkers(d, false, true)})
        .style("marker-end", function(d) {return getMarkers(d, false, false)});
  
    // remove old links
    path.exit().remove();
  
    // add new links
    path = path.enter().append("svg:path")
      .attr("class", "link")
      .classed("selected", (d) =&gt; d === selectedLink)
      .style("marker-start", function(d) {return getMarkers(d, false, true)})
      .style("marker-end", function(d) {return getMarkers(d, false, false)})
      .on("mousedown", (d) =&gt; {
        if (d3.event.shiftKey) return;
  
        // select link
        mousedownLink = d;
        selectedLink = (mousedownLink === selectedLink) ? null : mousedownLink;
        selectedNode = null;
        update();
      })
      .merge(path);
  
  path.append("svg:text")
      //.attr("dx", function(d) { return d.w/10})
      //.attr("dy", -4)
      .attr("x", function(d) {return d.length / 2})
      .attr("y", function(d) {return (d.length / 2) + 2})
      .attr("class", "edgelabel")
      .text((d) =&gt; d.length);```
  </code></pre>