Come inserire le etichette sui bordi nell'esempio Dendrogram?

Question

Dato un diagramma ad albero come l'esempio Dendrogram (source), come si metterebbero le etichette sui bordi? Il codice Javascript per disegnare i bordi assomiglia prossime righe:

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

Answer 1

Mike Bostock, l'autore di D3, molto gentilmente ci ha aiutato con la seguente soluzione. Definire uno stile per g.link; Ho appena copiato lo stile per g.node. Quindi ho sostituito il codice "var link = ...." con il seguente. Le funzioni xey posizionano l'etichetta al centro del tracciato.

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

La funzione di testo dovrebbe idealmente fornire un'etichetta specifica per ciascun bordo. Ho popolato un oggetto con i nomi dei miei bordi durante la preparazione dei miei dati, così la mia funzione di testo simile a questa:

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