D3.js - 외부 데이터로드 및 조작

Question

D3.js를 처음 사용하며 다양한 튜토리얼/연습/등으로 놀고 있지만 D3에 대한 기본적인 필요는 외부 데이터 (일반적으로 JSON)를로드하는 것입니다. 해당 데이터를 기반으로 몇 가지 대화 형 차트를 그립니다.

기본 햇살 예는 here입니다 :

내가 성공적으로 내 자신의 데이터에 적응. 그러나 데이터 전달을 단순화하고 D3.js 내의 일부 조작을 처리하기를 희망했습니다. 예를 들어 햇살 다이어그램을 사용할 수있는 계층 적 배열 대신 D3에서 필요에 따라 조작 할 수있는 플랫 데이터 파일을 제공하고 싶습니다.

그러나 D3의 데이터 함수 외부에 햇살 차트를 그리는 방법을 모르겠습니다. 나는 아래의 코드를 시도하고, 구조가 표시되도록하는 대신 JSON을 통해 데이터를로드하는은 (당연히 작동하지 않았다) 인라인을 포함 :

여기

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

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

나는 꽤 단순한 무언가를 잘못하고 있다고 확신하지만, D3가 모든 데이터를 처리하고 다이어그램을 맵핑하는 방법에 대해 두뇌를 잡는 데 어려움을 겪고 있습니다. d3.json과 같은 기능.

의견이 있으십니까?

Answer 1

partition.nodes(nest)을 호출하여 경로 렌더링을위한 적절한 레이아웃 위치로 데이터를 채우는 것을 잊어 버린 것 같습니다. 당신이 연결된 sunburst example에서

는 JSON 데이터는 다음과 같이 바인딩 :

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

이하는 것과 같습니다

이

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

방법 중 하나가 작동,하지만 당신은 partition.nodes를 호출 할 필요가 somewhere 그렇지 않으면 데이터에 위치가 없습니다.

지정된 중첩 된 필드가 모두 동일하기 때문에 지정된 중첩을 사용하는 예제 데이터는 단일 노드가있는 계층 구조를 생성합니다.