1

d3.jsでツリーマップをレンダリングしようとしていますが、サンプルコードを使用しています-http : //mbostock.github.com/d3/ex/treemap.html：

ここに画像の説明を入力してください

ソース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
     }
  }

});

コメントに感謝します。

4

1 に答える 1

2

フラットの意味がわかりません。D3に「ノード」スーパーカテゴリがない場合は、次を使用できます。

.data(treemap)

それ以外の：

.data(treemap.nodes)

ただし、JSONに「children」属性がないと、階層的なパッキングは得られません。

于 2012-04-23T02:52:50.310 に答える