Contraer/expandir nodos secundarios de árbol en d3.js?

Question

Estoy construyendo una estructura de árbol (o mejor dicho, modificando uno de los ejemplos con un conjunto de mis propios datos en mi json) y estoy intentando crear alguna funcionalidad:

El diseño de mi árbol es el ejemplo de árbol: http://mbostock.github.com/d3/ex/cluster.html

Estoy agregando (a los círculos) un evento onclick que me gustaría colapsar los elementos secundarios del nodo hecho clic. Es decir, cuando un usuario hace clic en el círculo de acero azul asociado con un nodo, quiero que los nodos desaparezcan.

He revisado la documentación y no he encontrado nada que me permita hacer que los nodos colapsen o desaparezcan.

¿Qué podría hacer?

Answer 1

Hay esta:

http://mbostock.github.com/d3/talk/20111018/tree.html

Hay una serie de otros ejemplos de diseño jerárquico interactivo de mi SVG Open keynote.

Answer 2

Lamentablemente, sigo poniéndome al día con D3 y no estoy seguro de cómo responder mejor a su pregunta. Pero aquí está un diseño dirigido por fuerza que le permite mostrar los nodos/ocultar haciendo clic sobre ellos, lo que podría darle algunas ideas: http://bl.ocks.org/1062288

Answer 3

Hay un par de enfoques, uno es simplemente usar stying regular para ocultar el marcado de los hijos (opacidad: 0, o pantalla: ninguno). Sin embargo, esto solo hace que los datos sean invisibles, el árbol mantiene su forma como si los datos estuvieran allí, simplemente no puede verlos.

Por lo general, querrá que el árbol simule que los datos no están allí y actualícelos en consecuencia, para eso puede usar el mismo enfoque que el ejemplo de disposición dirigida a la fuerza en el enlace anterior.

Todo se reduce a: 1) Utilizar una función para construir el árbol d3 2) añadir un evento de clic a los nodos plegables 3) El evento de clic cambia el nombre de la propiedad hijos del nodo y llama a la función en 1) que vuelve a dibujar el árbol sin los hijos de ese nodo.

Aquí está el código correspondiente desde el enlace en la respuesta de nkoren (http://bl.ocks.org/1062288):

function update() { 
    // build the tree layout here 
    // append on("click", click) to the collapsible nodes 
} 

// Toggle children on click 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
}