javascript - examples - D3.js-carga y manipulación de datos externos

d3.js tutorial

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 esos datos.

El ejemplo básico de sunburst está aquí :

Lo adapté 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 rayos de sol fuera de una de las funciones de datos de D3. Probé el siguiente código, y en lugar de cargar los datos a través de json, los incluí en línea para que la estructura sea 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); }); 

Así es como se ve el HTML:

<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 una función como d3.json.

¿Alguna idea?

Answer 1

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

En el ejemplo de Sunburst al que se vinculó, los datos de JSON se enlazan 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 funcionaría, pero debe llamar a partition.nodes en otro lugar, de lo contrario los datos no tendrán posiciones.

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