d3 파티션 도표를 플로팅 할 때 로컬 json 변수 사용

Question

나는 아래 형식으로 partion 차트에서 이것을 플로팅 할 수 있도록 formmated 오브젝트 모음을 가지고 있습니다.

{"name":"Component 234324234","children":[{"name":"Krishna Candidate - 1 435458976766","children":[{"name":"Krishna clinical 23423424","size":23423424},{"name":"DP Componet 98989","size":98989},{"name":"KRUTI COMP, 435435454353","size":435435454353}],"size":435458976766},{"name":"Krishna Candidate-Test 0","children":[],"size":0},{"name":"Test Candidate 5555","children":[{"name":"ADME Component 5555","size":5555}],"size":5555},{"name":"Candidate 5 37874474288","children":[{"name":"Teset Component 9898988","size":9898988},{"name":"AdmeComponent 34234324324","size":34234324324},{"name":"WPM Component 23432424","size":23432424},{"name":"WPM 1 2344324324","size":2344324324},{"name":"WPM2 234324324","size":234324324},{"name":"WPM 3 2343244","size":2343244},{"name":"WPM 4 23423432","size":23423432},{"name":"WPM 5 2323432","size":2323432},{"name":"Adme component one 989898","size":989898},{"name":"Tejas Jet Fighters 998989898","size":998989898},{"name":"Planned budget 1 100000","size":100000}],"size":37874474288},{"name":"Krishna Candidate 234324234","children":[{"name":"Test Component One 234324234","size":234324234}],"size":234324234}],"size":234324234},{"name":"undefined 4662000","children":[{"name":"Candidate Sirisha 4662000","children":[{"name":"Lead Generation 500000","size":500000},{"name":"Lead Optimization 500000","size":500000},{"name":"Lead Profiling 500000","size":500000},{"name":"BioMarker Discovery 300000","size":300000},{"name":"Target Validation 1000000","size":1000000},{"name":"BioMarker PK/PD 300000","size":300000},{"name":"Synthesize Tox Dose 250000","size":250000},{"name":"BioMarker Validation 300000","size":300000},{"name":"Rodent Tox 200000","size":200000},{"name":"Dog Tox 300000","size":300000},{"name":"Primate Tox 500000","size":500000},{"name":"Planned budget itemi 10000","size":10000},{"name":"Planned budget 1000","size":1000},{"name":"Planned budget 5 1000","size":1000}],"size":4662000}],"size":4662000}] 

    d3.json("flare.json", function(root) { 
     var g = vis.selectAll("g") 
      .data(partition.nodes(root)) 
     .enter().append("svg:g") 
      .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; }) 
      .on("click", click); 

     var kx = w/root.dx, 
      ky = h/1; 

     g.append("svg:rect") 
      .attr("width", root.dy * kx) 
      .attr("height", function(d) { return d.dx * ky; }) 
      .attr("class", function(d) { return d.children ? "parent" : "child"; }); 

     g.append("svg:text") 
      .attr("transform", transform) 
      .attr("dy", ".35em") 
      .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; }) 
      .text(function(d) { return d.name; }) 

     d3.select(window) 
      .on("click", function() { click(root); }) 

     function click(d) { 
     if (!d.children) return; 

     kx = (d.y ? w - 40 : w)/(1 - d.y); 
     ky = h/d.dx; 
     x.domain([d.y, 1]).range([d.y ? 40 : 0, w]); 
     y.domain([d.x, d.x + d.dx]); 

     var t = g.transition() 
      .duration(d3.event.altKey ? 7500 : 750) 
      .attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; }); 

     t.select("rect") 
      .attr("width", d.dy * kx) 
      .attr("height", function(d) { return d.dx * ky; }); 

     t.select("text") 
      .attr("transform", transform) 
      .style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; }); 

     d3.event.stopPropagation(); 
     } 

파티션 차트에 외부 URL의 json 개체가 있어야합니다. 위의 객체를 사용하여 차트를 플로팅하는 방법을 도와 줄 수있는 사람

Answer 1

{ "name"으로 시작하는 코드의 맨 위에있는 객체를 사용하려고합니까 : ...?

개체에 이름을 지정해야하는 경우 데이터를 말합니다. 또한 json 형식으로되어 있는지 확인해야합니다. json.lint.com을 사용해보십시오. 귀하의 데이터가 그 형식이 아니었기 때문에 그 중 절반 정도를 삭제했습니다.

다음 코드는 루트 디렉토리에서 flare.json을 호출합니다.이 코드는 시각화하려는 것이 아니기 때문에 코드의 해당 부분을 제거해야합니다. . 끝 (거기 인 경우) 즉,이 라인, 당신은 그것에 전화를 걸 필요가 없습니다 코드의 데이터로 지금

d3.json("flare.json", function(root) { 

, 그것은의 나머지 페이지로에 장전하여 코드

그러면 루트에 대한 참조를 데이터로 바꿔야합니다.

지금 이 코드는 here에서 온 것입니다. 편집 된 비트를 추가하고 코드 rendered 위에 변경합니다.