Mike Bostock, autor D3, bardzo łaskawie pomógł z poniższej rozwiązania. Zdefiniuj styl dla g.link; Właśnie skopiowałem styl dla g.node. Następnie zamieniłem kod "var link = ...." na następujący. Funkcje xiy umieszczają etykietę na środku ścieżki.
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";
});
Funkcja tekstowa powinna zawierać etykietę specjalnie dla każdej krawędzi. I zaludnionych obiekt z nazwiskami moich krawędzi podczas przygotowywania swoich danych, więc moja funkcja tekst wygląda następująco:
.text(function(d) {
var key = d.source.name + ":" + d.target.name;
return edgeNames[key];
});
Kilka osób zostało pokusie zamiany osi X i Y w drugim i trzecim linie ' linkg.append ("text") 'kawałek. Proszę, nie, oni są poprawni jak oni. Jest aktualizacja, ponieważ [Dendrogram przykład] (http://bl.ocks.org/mbostock/4063570) na stronie D3 uległa zmianie. Pierwszy wiersz powinien teraz brzmieć: 'var linkg = svg.selectAll (". Link ")' –