Dendrogram örneğindeki kenarlara etiketler nasıl eklenir?

Question

Dendrogram örnek (source) örneğinde olduğu gibi bir ağaç diyagramı verildiğinde, kenarlara etiketler nasıl yazılır? kenarlarını Javascript kodu sonraki çizgiler gibi görünür:

var link = vis.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

Answer 1

Mike Bostock çok nezaketle şu solüsyonu ile yardımcı D3 yazarı. G.link için bir stil tanımlayın; Sadece g.node için stili kopyaladım. Sonra "var link = ...." kodunu aşağıdaki gibi değiştirdim. X ve y işlevleri, etiketi yolun merkezine yerleştirir.

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

metin girişi ideal olarak her kenar için, özellikle bir etiket sağlamalıdır. Benim verilerini hazırlarken benim metin fonksiyonu şuna benzer şekilde benim kenarlarının isimlerle bir nesne doldurulur:

Birkaç kişi x 's takas cazip olmuştur ve y `ikinci ve üçüncü satırlarda var

.text(function(d) { 
     var key = d.source.name + ":" + d.target.name; 
     return edgeNames[key]; 
    });