D3.js - cargar y manipular datos externos

Question

Soy nuevo en D3.js y estoy jugando con una variedad de tutoriales/ejercicios/etc., pero mi necesidad básica de D3 es cargar datos externos (generalmente JSON) y dibujar algunos gráficos interactivos basados ​​en esa información.

El ejemplo básico es sunburst here:

Me adaptado con éxito a mis propios datos. Sin embargo, esperaba simplificar la entrega de datos y manejar parte de la manipulación dentro de D3.js. Por ejemplo, en lugar de una matriz jerárquica que está lista para el diagrama de rayos de sol, me gustaría entregar un archivo de datos planos que pueda ser manipulado según lo necesite D3.

Pero no estoy seguro de cómo dibujar un gráfico de resplandor solar fuera de una de las funciones de datos de D3. He probado el código de abajo, y en lugar de cargar los datos a través de JSON la incluí en línea por lo que la estructura es visible (como era de esperar no funcionó):

var w = 960, 
    h = 700, 
    r = Math.min(w, h)/2, 
    color = d3.scale.category20c(); 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w) 
    .attr("height", h) 
     .append("svg:g") 
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")"); 

var partition = d3.layout.partition() 
    .sort(null) 
    .size([2 * Math.PI, r * r]) 
    .value(function(d) { return 1; }); 
var arc = d3.svg.arc() 
    .startAngle(function(d) { return d.x; }) 
    .endAngle(function(d) { return d.x + d.dx; }) 
    .innerRadius(function(d) { return Math.sqrt(d.y); }) 
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); 
var data = [ 
         {'level1': 'Right Triangles and an Introduction to Trigonometry', 
'level2': '', 'level3': '', 'level4': '', 'branch': 'TRI', 'subject': 
'MAT'}, 
         {'level1': '', 'level2': 'The Pythagorean Theorem', 'level3': '', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
         {'level1': '', 'level2': '', 'level3': 'The Pythagorean Theorem', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'}, 
         {'level1': '', 'level2': '', 'level3': 'Pythagorean Triples', 
'level4': '', 'branch': 'TRI', 'subject': 'MAT'} 
         ]; 
console.log(data); // looks good here 
var nest = d3.nest() 
     .key(function(d) { return d.subject;}) 
     .key(function(d) { return d.branch;}) 
     .entries(data); 
console.log(nest); // looks good here 
var path = vis.selectAll("path") 
     .data(nest) 
    .enter().append("svg:path") 
     .attr("display", function(d) { return d.depth ? null : 
"none"; }) // hide inner ring 
     .attr("d", arc) 
     .attr("fill-rule", "evenodd") 
     .style("stroke", "#fff") 
     .style("fill", function(d) { return color((d.children ? d : 
d.parent).name); }); 

Esto es lo que se ve el código HTML como:

<div class="gallery" id="chart"> 
    <svg width="960" height="700"> 
     <g transform="translate(480,350)"> 
      <path display="none" d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNL0,0Z" fill-rule="evenodd" style="stroke: #ffffff; "/> 
     </g> 
    </svg> 
</div> 

Estoy seguro de que estoy haciendo algo mal que es bastante simple, pero estoy teniendo problemas para entender cómo D3 analizará todos los datos y trazará el diagrama si no estoy anidando las funciones de dibujo dentro de un funciona como d3.json.

¿Alguna idea?

Answer 1

Parece que olvidó llamar al partition.nodes(nest) para completar los datos con las posiciones de diseño adecuadas para representar las rutas.

En el sunburst example que haya vinculado a, los datos JSON está obligado así:

var path = vis.data([json]).selectAll("path") 
    .data(partition.nodes) 
    .enter().append("path") 
    // … 

Esto es equivalente a:

var path = vis.selectAll("path") 
    .data(partition.nodes(json)) 
    .enter().append("path") 
    // … 

Cualquiera de los enfoques quiere trabajar, pero hay que llamar partition.nodesen algún lugar de lo contrario, los datos no tendrán ninguna posición.

También tenga en cuenta que sus datos de ejemplo con el anidamiento especificado generarán una jerarquía con un solo nodo, ya que todos los campos anidados especificados son los mismos.