Albero/dendrogramma con connettori a gomito in d3

Question

Sono molto nuovo a d3.js (e SVG in generale), e voglio fare qualcosa di semplice: un albero/dendrogramma con connettori angolati.

Ho cannibalizzato l'esempio d3 da qui: http://mbostock.github.com/d3/ex/cluster.html e voglio renderlo più simile alle Protovis esempi qui:

• http://mbostock.github.com/protovis/ex/indent.html
• http://mbostock.github.com/protovis/ex/dendrogram.html

Ho fatto una partenza qui: http://jsbin.com/ugacud/2/edit#javascript,html e penso che sia il seguente frammento sbagliato:

var diagonal = d3.svg.diagonal() 
.projection(function(d) { return [d.y, d.x]; }); 

Tuttavia non c'è una sostituzione evidente, potrei usare d3.svg.line, ma non so come integrarlo correttamente, e idealmente mi piacerebbe un connettore a gomito .... anche se mi chiedo se sto usando il torto libreria per questo, poiché molti degli esempi di d3 che ho visto usano la forza gravitazionale per fare grafici di oggetti invece che di alberi.

Answer 1

Sostituire la funzione diagonal con un generatore di percorsi personalizzato, utilizzando "H" e "V" SVG path commands.

function elbow(d, i) { 
    return "M" + d.source.y + "," + d.source.x 
     + "V" + d.target.x + "H" + d.target.y; 
} 

noti che l'origine e destinazione di coordinate (x e y) sono invertiti. Questo esempio visualizza il layout con un orientamento orizzontale, tuttavia il layout utilizza sempre lo stesso sistema di coordinate: x è l'ampiezza dell'albero e y è la profondità dell'albero. Quindi, se si desidera visualizzare l'albero con i nodi foglia (più in basso) sul lato destro, è necessario scambiare x e y. Questo è ciò che fa la funzione di proiezione della diagonale, ma nell'implementazione del gomito sopra ho semplicemente codificato il comportamento piuttosto che usare uno configurable function.

Come in:

svg.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", elbow); 

E un esempio di lavoro:

• http://bl.ocks.org/d/2429963/