D3.js - ładowanie i manipulowanie danymi zewnętrznymi

Question

Jestem nowy w D3.js i bawię się z różnymi samouczkami/ćwiczeniami/itp., Ale moją podstawową potrzebą D3 jest ładowanie danych zewnętrznych (zwykle JSON) i narysuj kilka interaktywnych wykresów na podstawie tych danych.

Podstawowym przykładem Sunburst jest here:

pomyślnie dostosować go do własnych danych. Miałem jednak nadzieję uprościć dostarczanie danych i poradzić sobie z niektórymi manipulacjami w D3.js. Na przykład, zamiast hierarchicznej tablicy, która jest gotowa na diagram sunburst, chciałbym dostarczyć płaski plik danych, który może być zmanipulowany w razie potrzeby przez D3.

Ale nie jestem pewien, jak narysować wykres sunburst poza jedną z funkcji danych D3. Próbowałem poniższy kod, a zamiast ładowania danych za pośrednictwem json włączyła ją inline więc struktura jest widoczna (nic dziwnego, że nie działa):

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

Oto co HTML wygląda następująco:

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

Jestem pewna, że ​​robię coś złego, co jest całkiem proste, ale mam problem ze zrozumieniem, jak D3 przejdzie przez wszystkie dane i wykreśli diagram, jeśli nie zagnieżdżam funkcji rysowania w obrębie działa jak d3.json.

Jakieś myśli?

Answer 1

Wygląda na to, że zapomniałeś zadzwonić pod numer partition.nodes(nest), aby wypełnić dane odpowiednimi pozycjami układu do renderowania ścieżek.

W sunburst example które związane, dane JSON jest związany tak:

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

Jest to odpowiednik:

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

Albo podejście będzie działać, ale trzeba zadzwonić partition.nodesgdzieś inaczej dane nie będą miały pozycji.

Należy również zauważyć, że dane przykładowe z określonym zagnieżdżeniem tworzą hierarchię z pojedynczym węzłem, ponieważ wszystkie określone zagnieżdżone pola są takie same.