Javascript D3.js-平面JSON层次结构中的树映射

我试图在d3.js中呈现一个树形图，并使用示例代码-：

我遇到了一个问题，因为我的源JSON是一个简单的继承人，因此对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
     }
  }

});

d3.json（“/finance/data”），函数（json）{
var w=960，
h=500，
颜色=d3.ERGB（“rgb（0255,0）”，“rgb（255,0,0）”；
//xcolor=d3.scale.linear（）.domain（[-26,13]）.range（“rgb（0255,0）”，“rgb（255,0,0）”），
x=d3.scale.linear（）.domain（[-26,13]）范围（[0,1]），
步长=[2.46,1.66]，
minval=[-16.28，-16.67]；
var treemap=d3.layout.treemap（）
.尺寸（[w，h]）
.粘性（真）
.value（函数（d）{返回d.count；}）；
var div=d3.选择（#树映射转换”）.追加（“div”）
.风格（“位置”、“相对”）
.样式（“宽度”，w+“px”）
.样式（“高度”，h+“px”）；
div.data（[json]）。选择全部（“div”）
.data（树映射节点）
.enter（）.append（“div”）
.attr（“类”、“单元”）
.style（“背景”，函数（d）{return treemap_color（d.touction，2.5,10）；}）
.呼叫（手机）
.attr（“文本锚定”、“中间”）
.text（函数（d）{返回d.children？null:d.ticker；}）；
功能单元（）{
这
.style（“左”，函数（d）{返回d.x+“px”；}）
.style（“top”，函数（d）{返回d.y+“px”；}）
.style（“宽度”，函数（d）{返回d.dx-1+“px”；}）
.style（“高度”，函数（d）{返回d.dy-1+“px”；}）
.style（“文本锚定”、“中间”）；
}
函数树映射颜色（值、步长、步长）{
如果（值==0）{
返回“rgb（0,0,0）”；
}else if（值<0）{
var x=数学舍入（（255/步）*数学绝对值（值/步长））；
返回“rgb（0，+x+”，0）；//失业率下降=>绿色
}否则{
变量y=数学四舍五入（（255/步）*值/步长）；
返回“rgb（“+y+”，0,0）”；//失业率增加=>红色
}
}
});

---

感谢您的评论。

不知道您的意思是什么。如果您的意思是在D3中没有“节点”超类别，那么您可以使用：

.data(treemap)

而不是：

.data(treemap.nodes)

但是，如果JSON中没有“children”属性，您将无法获得任何分层打包。

谢谢，.data（treemap）就是我所需要的！