javascript - force-directed d3.js add edge labels -

i want visualize graph in d3js force-directed layout. have been following question, don't work.

i created jsfiddle, can found here. however, lines not working, labels how should be. oddly, when execute locally working someday lines shown twice, this:

<g class="link-g">       <line class="link" x1="297.0210832552382" y1="122.48446414068198" x2="245.8066880510027" y2="240.1061616356794"></line>       <text>interaction</text>       <text x="271.4138856531205" y="181.2953128881807">interaction</text> </g> 

anyway, following. first link , linktext.

var link = svg.selectall(".link")      .data(links, function(d) {            return d.source.id + '-' + d.target.id;       });   link.enter()       .append("g")       .attr("class","link-g")       .append("line")       .attr("class", "link");   link.exit().remove();   var linktext = svg.selectall(".link-g")       .append("text")       .text("label"); 

then in tick():

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;      }); 

what doing wrong? thanks.

you add attributes x1, x2, y1, y2 on svg:g element instead of line, that's why there no visible links.

if check code : svg:g elements have values, , line got no attribute.

create new variable store links, , add attributes on variable:

var linkline = link.enter()    .append("g")    .attr("class","link-g")    .append("line")    .attr("class", "link"); 

and update tick function

function tick(){     linkline.attr("x1", function(d) {          return d.source.x;      })     /* ... (others attr) ... */ }