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

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使用新数据调用时,树图完全没有变化.

我通过定义ie 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网站上的树形图可视化.这种约束的原因是,使用粘性布局时,树的拓扑结构不能更改 - 您必须在同一层次结构中具有相同数量的节点.唯一改变的是价值.

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

另外:您还没有包含渲染代码,因此您的数据连接可能会出错.但是,我认为更有可能采用粘性解释.有关解释,请参阅思考连接.