D3.js - 평면 JSON 계층 구조

Question

내가 d3.js의 트리 맵을 렌더링하기 위해 노력하고 있습니다에서 트리 맵 및 예제 코드 사용 - http://mbostock.github.com/d3/ex/treemap.html :

나는에 문제가 발생하고이 나의 소스 JSON 편평한 heirachy이며 따라서 treemap.nodes에 대한 호출이 잘못되었습니다.

아무도 평면 계층 구조를 반환하는 방법을 조언 할 수 있습니까?

내 샘플 JSON :

[ 
    {"ticker":"$GOOG","count":"82","sentiment":"9"}, 
    {"ticker":"$AAPL","count":"408","sentiment":"8"}, ... 

그리고 지금까지 내 전체 코드 :

d3.json("/finance/data", function(json) { 

    var w = 960, 
     h = 500, 
     color = d3.interpolateRgb("rgb(0,255,0)", "rgb(255,0,0)"); 
     //xcolor = d3.scale.linear().domain([-26,13]).range("rgb(0,255,0)", "rgb(255,0,0)"), 
     x = d3.scale.linear().domain([-26,13]).range([0, 1]), 
     stepsize = [2.46, 1.66], 
     minval = [-16.28, -16.67]; 


    var treemap = d3.layout.treemap() 
     .size([w, h]) 
     .sticky(true) 
     .value(function(d) { return d.count; }); 

    var div = d3.select("#treemap-transition").append("div") 
     .style("position", "relative") 
     .style("width", w + "px") 
     .style("height", h + "px"); 


    div.data([json]).selectAll("div") 
    .data(treemap.nodes) 
    .enter().append("div") 
     .attr("class", "cell") 
     .style("background", function(d) { return treemap_color(d.sentiment, 2.5, 10); }) 
     .call(cell) 
     .attr("text-anchor", "middle") 
     .text(function(d) { return d.children ? null : d.ticker; }); 


    function cell() { 
    this 
     .style("left", function(d) { return d.x + "px"; }) 
     .style("top", function(d) { return d.y + "px"; }) 
     .style("width", function(d) { return d.dx - 1 + "px"; }) 
     .style("height", function(d) { return d.dy - 1 + "px"; }) 
     .style("text-anchor", "middle"); 
    } 


    function treemap_color(value, stepsize, steps) { 
    if (value == 0) { 

     return "rgb(0,0,0)"; 

    } else if (value < 0) { 

     var x = Math.round((255/steps) * Math.abs(value/stepsize)); 
     return 'rgb(0,' + x + ',0)'; //DECREASE in unemployment => green 

    } else { 

     var y = Math.round( (255/steps) * value/stepsize); 
     return 'rgb(' + y + ',0,0)'; //INCREASE in unemployment => red 
    } 
    } 

}); 

어떤 의견을 주셔서 감사합니다.

Answer 1

평평한 의미가 확실하지 않습니다. 당신은 D3에서 "노드"supercategory이없는 것을 의미한다면, 당신은 그냥 사용할 수 있습니다

.data(treemap) 

대신 :

.data(treemap.nodes) 

하지만 JSON에서 "어린이"속성없이, 계층 적 패킹을 얻지 못할 것입니다.