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

不确定你的意思是扁平的。如果你的意思是你没有＃34;节点＆＃34; D3中的超类别，那么你可以使用：

.data(treemap)

而不是：

.data(treemap.nodes)

但没有＆＃34;孩子＆＃34;在您的JSON中，您不会获得任何分层包装。