LinkText не работает в древовидной структуре d3js

Question

Я пытаюсь поместить linkText для ссылки в древовидной структуре 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.