d3.js 자체 참조 CSV 입력에서 확대/축소 가능한 Sunburst 시각화

Question

저는 d3.js의 초보자이며 Zoomable Sunburst을 자체 참조 CSV 데이터에서 작동하도록 조정하는 데 도움이 필요합니다. 입력 CSV에서 샘플 라인 : 당신이 볼 수 있듯이

id,parentId,name,size 
ROOT,NULL,Root, 
RE,ROOT,General > Revenue Expenditure, 
RE11,RE,Main supervision recovery etc., 
RE11A109K,RE11,Shivjayanti celebrations and lighting,170000 
RE11H108,RE11,Electicity for import tax naka,2550000 
RE11J,RE11,Maintaince for main building, 
RE11J101A,RE11J,Electricity expenditure,11475000 
RE11J101 C,RE11J,Power lift,2125000 

, 깊이의 변수 수준이 있습니다. 어떤 곳에서는 데이터가 3 단계에서 나오고, 다른 곳에서는 9 단계로 진행되는 부모 - 자식 관계가있을 수 있습니다. 그것은 당신을위한 정부 예산입니다! 시각화에 중요하지 않은이 4 개 열 (여기서는 생략 됨)이 있지만 마우스 오버시 사이드 창에 해당 내용이 표시됩니다. 따라서 중요하지는 않지만 추가 열은 이동해야하며 삭제되지 않아야합니다.

많은 d3.nest() 예제를 살펴 보았지만 부모 - 자식 자체 참조 열과 가변 깊이 수준의 데이터에서는 작동하지 않는 것으로 보입니다.

현재이 문제를 해결하기 위해 flare.json 형식의 계층 적 JSON (DataStructures.Tree project)으로 변환하고 있습니다. 그러나 좀 더 직접적인 해결책을 찾고 있습니다. 거의 다 왔지만 다른 출처의 코드를 혼합 할 수는 없습니다. 완전한 top-to-bottom 해결책을 제시해 주셔서 감사드립니다. 미리 감사드립니다!

Answer 1

알 수 있습니다. 우리는 base.js, DataStructures.Tree.js라는 질문에 링크 된 DataStructures.Tree 프로젝트의 스크립트를 포함합니다.

d3.csv("electrical5.csv", function(data){ 
var tree = DataStructures.Tree.createFromFlatTable(data), 
      root = tree.toSimpleObject(function(objectToDecorate, originalNode) { 
       objectToDecorate.size = originalNode.size; 
       if (objectToDecorate.children && objectToDecorate.children.length == 0) { 
        delete objectToDecorate.children; 
       } 
       return objectToDecorate; 
      }); 
//console.log(JSON.stringify(root)); 

:이 라인 ..with

d3.json("flare.json", functon(error, root) { 

, 우리는이 라인을 대체, 그리고

<script type="text/javascript" src="base.js"></script> 
<script type="text/javascript" src="DataStructures.Tree.js"></script> 
<script src="http://d3js.org/d3.v3.min.js"></script> 

을 (당신은/JS/lib 디렉토리 /와/JS/공급 업체 /에서 찾을 수 있습니다)

다른 모든 것을 그대로 둡니다.

---

디버깅을 위해 console.log 행의 주석 처리를 제거하십시오. 페이지를로드 할 때 json 코드를 브라우저 콘솔에 넣습니다. 웹 페이지에서 텍스트 영역을 만들고 그 안에 json 코드를 출력 할 수도 있습니다. 이 포맷되지 않은 JSON 코드, 그래서 것

<textarea id="SHOWME"></textarea> 

[페이지의 맨 아래에]

document.getElementById("SHOWME").value = JSON.stringify(root); 

http://codebeautify.org/jsonviewer에 복사 - 붙여 넣기하고 당신에게 잘 형식의 JSON을 제공해야한다.

simpleChildRepresentation.push(decorateNode({ 
    "name" : node.name, 
    "children" : children 
}, node)); 

:

---

정규 [ID, parentId, 이름, 크기]에서 떨어져에서 더 많은 열을 얻으려면, 우리는 DataStructures.Tree.js

찾은이 라인을 편집해야 그리고 추가 열을 node.name 행과 동일한 형식으로 삽입하십시오.

simpleChildRepresentation.push(decorateNode({ 
    "name" : node.name, 
    //CUSTOM COLUMNS 
    "workcode" : node.id, 
    "parentcode" : node.parentId, 
    "department" : node.department, 
    "totalorextract" : node.totalorextract, 
    "total" : node.total, 
    "pages" : node.pages, 
    //CUSTOM COLUMNS DONE 
    "children" : children 
}, node)); 

이제 직접 flare.json을 사용하는 d3.js 시각화에 자체 참조 CSV 데이터를 시각화 할 수 있습니다. 그래도 애니메이션은 좀 더 까다 롭습니다.