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

不确定你的意思是否持平。如果你的意思是你没有一个“节点” supercategory在D3，那么你可以使用：的

.data(treemap) 

代替：

.data(treemap.nodes) 

，但没有在你的JSON的“孩子”的属性，你不会得到任何分层包装。