Майк Босток, автор D3, очень любезно помог со следующим раствором. Определите стиль для g.link; Я просто скопировал стиль для g.node. Затем я заменил код «var link = ....» следующим. Функции x и y помещают метку в центр пути.
var linkg = vis.selectAll("g.link")
.data(cluster.links(nodes))
.enter().append("g")
.attr("class", "link");
linkg.append("path")
.attr("class", "link")
.attr("d", diagonal);
linkg.append("text")
.attr("x", function(d) { return (d.source.y + d.target.y)/2; })
.attr("y", function(d) { return (d.source.x + d.target.x)/2; })
.attr("text-anchor", "middle")
.text(function(d) {
return "edgeLabel";
});
Текстовая функция должна идеально обеспечивать метку для каждого края. Я заселена объект с именами моих краев, готовя мои данные, поэтому мой текст функции выглядит следующим образом:
.text(function(d) {
var key = d.source.name + ":" + d.target.name;
return edgeNames[key];
});
Несколько человек был соблазн поменять х годов и у во второй и третьей строках ' linkg.append ("text") 'piece. Пожалуйста, не делайте, они правильные, как есть. Обновлено, потому что на [Dendrogram example] (http://bl.ocks.org/mbostock/4063570) на веб-сайте D3 изменилось. Первая строка должна теперь читать: 'var linkg = svg.selectAll (". Link ")' –