D3.js - caricamento e manipolazione di dati esterni

Question

Sono nuovo di D3.js e sto giocando con una varietà di tutorial/esercizi/etc, ma il mio bisogno di base per D3 è di caricare dati esterni (di solito JSON) e disegna alcuni grafici interattivi basati su quei dati.

L'esempio solarizzazione di base è here:

mi sono adattato con successo ai miei propri dati. Tuttavia, speravo di semplificare la consegna dei dati e gestire alcune delle manipolazioni all'interno di D3.js. Ad esempio, invece di un array gerarchico pronto per il diagramma sunburst, vorrei fornire un file di dati flat che può essere manipolato, se necessario, da D3.

Ma, non sono sicuro di come disegnare una carta sunburst al di fuori di una delle funzioni dati di D3. Ho provato il codice qui sotto, e invece di caricare i dati tramite JSON incluso è in linea in modo che la struttura sia visibile (non sorprende non ha funzionato):

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); }); 

Ecco quello che sembra il codice HTML come:

<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> 

Sono sicuro che sto facendo qualcosa di sbagliato che è piuttosto semplice, ma sto avendo problemi a capire come D3 passerà attraverso tutti i dati e mapperò il diagramma se non sto annidando le funzioni di disegno all'interno di un funzione come d3.json.

Qualche idea?

Answer 1

Sembra che tu abbia dimenticato di chiamare partition.nodes(nest) per popolare i dati con le posizioni di layout appropriate per il rendering dei percorsi.

Nel sunburst example che si è collegato al, i dati JSON è tenuto in questo modo:

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

Ciò equivale a:

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

Entrambi gli approcci avrebbe funzionato, ma è necessario chiamare partition.nodesda qualche parte altrimenti i dati non avranno posizioni.

Si noti inoltre che i dati di esempio con la nidificazione specificata produrranno una gerarchia con un singolo nodo, poiché tutti i campi nidificati specificati sono gli stessi.