Question

我试图让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时，树图完全没有变化。

我通过在App.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是否会被缓存？

Answer 1

是的，如果设置treemap.sticky(true)，则部分缓存布局。请参阅treemap.sticky的文档。

使用treemap.sticky的期望是您使用相同的根节点作为布局的输入，但您更改了值函数以更改子节点的大小。有关使用粘性树形图布局更改值函数的示例，请参阅D3网站上的treemap visualization。这种约束的原因是，使用粘性布局时，树的拓扑结构不能更改 - 您必须在同一层次结构中具有相同数量的节点。唯一改变的是价值。

因此，如果您使用两组不同的数据调用drawGraphFromJson，则需要设置treemap.sticky(false)，或者需要将两个数据集合并为一个层次结构，然后更改值在两者之间制作动画。

另外：您还没有包含渲染代码，因此您的数据连接可能会出错。但是，我认为更有可能采用粘性解释。有关说明，请参阅Thinking with Joins。

当根节点传递给它时，是否会缓存d3树形图布局？

1 个答案: