Layouts

De jerarquía - d3-hierarchy

Arbol

Los conjuntos de datos en árbol (anidados unos datos dentro de otros) son perfecto para el tipo de layout de la función d3.tree().

Input

<svg width="600" height="600"></svg>

 <script>
   var data = {
     "name": "Max",
     "children": [
       {
         "name": "Carlos",
         "children": [
           {"name": "Carla"},
           {"name": "Eusebio"},
           {"name": "Alicia"}
        ]
       },
       {
         "name": "Joana",
         "children": [
           {"name": "Cristina"},
           {"name": "Julián"},
           {"name": "Recaredo"}
         ]
       }
     ]
   };

   var svg = d3.select("svg"),
       width = +svg.attr("width"),    // La anotación con + extrae
       height = +svg.attr("height"),  // el valor del atributo
       g = svg.append("g").attr("transform", "translate(0,40)");

   // Parseamos los diccionarios anidados y extraemos el nodo padre
   var root = d3.hierarchy(data)

   // Creamos un layout de árbol
   var tree = d3.tree().size([width-30, height-160]);
   tree(root);    // Insertamos la jerarquía en el árbol

   // Creamos los enlaces entre los elementos
   var link = g.selectAll(".link")
       .data(root.links())      // Pasamos como dato los enlaces pade-hijo
       .enter().append("line")  // Para cada enlace una linea...
           .attr("class", "link")
           .attr("stroke-width", "2px")
           .attr("stroke", "#ddd")
           .attr("x1", function(d) { return d.source.x; })
           .attr("y1", function(d) { return d.source.y; })
           .attr("x2", function(d) { return d.target.x; })
           .attr("y2", function(d) { return d.target.y; });

   // Creamos nodos para los elementos del árbol
   var node = g.selectAll(".node")
       .data(root.descendants())  // Accedemos a los descendientes del árbol
       .enter()
         .append("g")     // Para cada nodo creamos un grupo
           .attr("transform", function(d) {
               return "translate(" + d.x + "," + d.y + ")";
           })

   // En cada nodo añadimos lo que queramos
   node.append("circle")
     .attr("r", 2.5);

   node.append("text")
    .text(function(d) { return d.data.name });
 </script>

Output

La función d3.hierarchy(data[, children]) extrae el nodo padre de un conjunto de datos anidados.