LinkText在树布局不工作d3js

Question

我想把链接文本链接在树布局d3js但它不wlrking，创建了jsfiddle项目here。任何人都可以告诉我，linkText为什么不来。

var link = svg.selectAll(".link") 
       .data(links, function (d) { 
        return d.target.id; 
      }); 
link.enter().insert("path", "g") 
.attr("class", "link") 
.attr("d", function (d) { 
    var o = { 
     x : source.x0, 
     y : source.y0 
    }; 
    return diagonal({ 
     source : o, 
     target : o 
    }); 
}); 

link.transition().duration(duration) 
.style("stroke", function (d) { 
    return "#99FFCC"; 
}) 
.attr("d", diagonal); 
link.append("text") 
.attr("font-family", "Arial, Helvetica, sans-serif") 
.attr("fill", "Black") 
.style("font", "normal 12px Arial").attr("transform", function(d) { 
    return "translate(" + 
     (d.target.y - 50) + "," + 
     (d.target.x - 10) + ")"; 
}).attr("text-anchor", "middle").text(function (d) { 
alert(d.target.label); 
return d.target.label; 
}); 

Answer 1

你错就错在这里：

link.enter().insert("path", "g") 
.attr("class", "link") 
... 
... 
link.append("text") 
.attr("font-family", "Arial, Helvetica, sans-serif") 
.attr("fill", "Black") 

这个代码将会把文本路径DOM，这是不正确内。 文本DOM不应该在路径DOM内。

正确的代码应该是这样的：

// Update the links… 
    var link = svg.selectAll("path.link") 
     .data(links); 
    //adding the text to the svg 
link.enter().insert("text") 
     .attr("font-family", "Arial, Helvetica, sans-serif") 
     .attr("fill", "Black") 
     .style("font", "normal 12px Arial") 
     .attr("transform", function (d) { 
       return "translate(" + (d.target.y - 30) + "," + (d.target.x - 10) + ")"; 
      }) 
     .attr("text-anchor", "middle") 
     .text(function (d) { 
     console.log(d.target.label); 
     return d.target.label; 
    }); 

全部工作代码here。