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但是，当我使用新数据调用时，树形图根本不会改变。

我通过App.treemap在drawGraphFromJsonie 中定义来解决这个问题，

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 网站上的树图可视化。这种约束的原因是，对于粘性布局，树的拓扑不能改变——在同一层次结构中必须有相同数量的节点。唯一改变的是价值。

因此，如果您drawGraphFromJson使用两组不同的数据进行调用，那么您要么需要设置treemap.sticky(false)，要么需要将两个数据集合并到一个层次结构中，然后更改值函数以在两者之间进行动画处理。

Also: you haven't included your rendering code, so it's possible there's an error in your data join. However, I think the sticky explanation is more likely. See Thinking with Joins for an explanation.

于 2012-05-09T16:56:20.067 回答