4

アニメーション化するd3ツリーマップを取得しようとしていて、次のようなものがありました

App.svg = d3.select("#medals-tree-map").append("svg:svg")
    .style("width", App.canvasWidth)
    .style("height", App.canvasHeight)
  .append("svg:g")
    .attr("transform", "translate(-.5,-.5)")
    .attr("id", "container");

App.treemap = d3.layout.treemap()
    .size([App.canvasWidth + 1, App.canvasHeight + 1])
    .value(function(d) { return d.number; })
    .sticky(true);

function drawGraphFromJson(data) {
  // Draw the graph
  var leaves = App.treemap(data);

  var cell = App.svg.selectAll("g.cell")
    .data(leaves);

  // More rendering code
}

この回答に基づく: https://stackoverflow.com/a/9650825/111884

drawGraphFromJsonただし、新しいデータで呼び出すと、ツリー マップはまったく変化しません。

ieApp.treemap内で定義することで問題を修正しました。drawGraphFromJson

function drawGraphFromJson(data) {
  App.treemap = d3.layout.treemap()
    .size([App.canvasWidth + 1, App.canvasHeight + 1])
    .value(function(d) { return d.number; })
    .sticky(true);

  // Draw the graph
  var leaves = App.treemap(data);

  var cell = App.svg.selectAll("g.cell")
    .data(leaves);

  // More rendering code
}

なぜこれを行う必要があるのですか？treemapルート ノードを渡すとキャッシュされますか?

4

1 に答える 1

11

はい、設定した場合、レイアウトは部分的にキャッシュされますtreemap.sticky(true)。treemap.stickyのドキュメントを参照してください。

treemap.sticky で期待されるのは、レイアウトへの入力として同じルート ノードを使用することですが、値関数を変更して子ノードのサイズを変更する方法です。スティッキー ツリーマップ レイアウトを使用して値関数を変更する例については、D3 Web サイトのツリーマップ ビジュアライゼーションを参照してください。この制約の理由は、スティッキー レイアウトではツリーのトポロジを変更できないためです。同じ階層に同じ数のノードが必要です。変わるのは価値だけです。

したがって、drawGraphFromJson2 つの異なるデータ セットを使用して呼び出す場合は、 を設定するかtreemap.sticky(false)、2 つのデータセットを 1 つの階層にマージしてから、値関数を変更して 2 つの間でアニメーション化する必要があります。

また、レンダリング コードが含まれていないため、データ結合にエラーがある可能性があります。ただし、粘着性のある説明の方が可能性が高いと思います。説明については、結合の考え方を参照してください。

于 2012-05-09T16:56:20.067 に答える