Árbol/dendrograma con conectores de codo en d3

Question

Soy muy nuevo en d3.js (y SVG en general), y quiero hacer algo simple: un árbol/dendrograma con conectores en ángulo.

me han canibalizado el ejemplo d3 desde aquí: http://mbostock.github.com/d3/ex/cluster.html y quiero que sea más como los ejemplos Protovis aquí:

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

he tenido un comienzo aquí: http://jsbin.com/ugacud/2/edit#javascript,html y creo que es el siguiente fragmento incorrecto:

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

Sin embargo, no hay un reemplazo obvio, podría usar d3.svg.line, pero no sé cómo integrarlo correctamente, y idealmente me gustaría un conector para el codo ... aunque me pregunto si estoy usando el incorrecto biblioteca para esto, ya que muchos de los ejemplos d3 que he visto están usando la fuerza gravitacional para hacer gráficos de objetos en lugar de árboles.

Answer 1

Reemplace la función diagonal con un generador de ruta personalizado, utilizando SVG "H" y "V" path commands.

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

Tenga en cuenta que el origen y destino de las coordenadas (x y Y) están intercambiados. Este ejemplo muestra el diseño con una orientación horizontal, sin embargo, el diseño siempre usa el mismo sistema de coordenadas: x es la anchura del árbol, y y es la profundidad del árbol. Por lo tanto, si desea mostrar el árbol con los nodos de hoja (más abajo) en el borde derecho, debe intercambiar x y y. Eso es lo que hace la función de proyección de la diagonal, pero en la implementación del codo anterior acabo de codificar el comportamiento en lugar de usar un configurable function.

Como en:

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

Y un ejemplo de trabajo:

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