0


したがって、このリンクから Zoomable Icicle チャートを変更して、まったく同じですが、最後のノード、薄緑色のノードが互いに隣り合うのではなく、互いに 重なり合うように変更しようとしています。つららチャートのロジックはこの時点でのみ中断する必要があるため、これは私にとって非常に複雑でした。この点を参照できることは、これまでのところ d の d.depth プロパティによってのみ与えられました。それでも、もっとエレガントな解決策があるかどうかを見つけようとしています。
これは、Zoomable パーティションの Icicle のコードです。

var width = 960,
height = 250;

var x = d3.scale.linear()
.range([0, width]);

var y = d3.scale.linear()
.range([0, height]);

var color = d3.scale.category20c();

var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);

var partition = d3.layout.partition()
.value(function(d) { return d.size; });

d3.json("../data/flare.json", function(json) {
  var rect = vis.data([json]).selectAll("rect")
  .data(partition.nodes)
.enter().append("rect")
  .attr("x", function(d) { return x(d.x); })
  .attr("y", function(d) { return y(d.y); })
  .attr("width", function(d) { return x(d.dx); })
  .attr("height", function(d) { return y(d.dy); })
  .attr("fill", function(d) { return color((d.children ? d : d.parent).name); })
  .on("click", click);

  function click(d) {
    x.domain([d.x, d.x + d.dx]);
    y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

    rect.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  }
});

積み重ねられた長方形を作成するには、すべての属性 x、y、幅、高さに異なるロジックが必要になると思いますが、どうすればそれを判断できますか? どんな助けでも大歓迎です。ありがとう！

4

1 に答える 1

0

ビジュアライゼーション コードが変更なしでデータを正しく描画するように、データを変換してみてください。私の理解が正しければ、ノード自体の代わりにノードの子を表示しようとしています。このコード スニペットは、ターゲット ノードのすべての子をターゲット ノードの親に再ペアレント化してから、ターゲット ノードを削除します (ターゲット ノードが「ノード」と呼ばれるルート ノードの子であると仮定します)。

d3.json("../data/flare.json", function(json) {
    d3.keys(json['node']).forEach(function(e) {
        json[e] = json['node'][e];
    });
    json['node'] = null

    /* the rest of the vis code */
});

お役に立てれば。

于 2012-11-22T19:25:40.430 に答える