当根节点传递给它时，d3 treemap布局是否被缓存？ [英] Does the d3 treemap layout get cached when a root node is passed to it?

问题描述

我试图获得一个d3树形图到动画，并有类似

I was trying to get a d3 treemap to animate, and had something like

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
}

answer： http://stackoverflow.com/a/9650825/111884

但是，当我用新数据调用 drawGraphFromJson 时，树形图不会改变。

However, the tree map doesn't change at all when I call drawGraphFromJson with new data.

我通过在 drawGraphFromJson 内定义 App.treemap 即可解决问题，即

I fixed the problem by defining App.treemap inside the drawGraphFromJson ie,

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
}

需要这样做吗？

Why do I need to do this? Does treemap become cached when you pass in a root node?

推荐答案

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

Yes, the layout is partially cached if you set treemap.sticky(true). See the documentation for treemap.sticky.

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

The expectation with treemap.sticky is that you use the same root node as input to the layout but you change the value function to alter how the child nodes are sized. See the treemap visualization on the D3 website for an example of changing the value function with a sticky treemap layout. The reason for this constraint is that with a sticky layout, the topology of the tree can't change—you must have the same number of nodes in the same hierarchy. The only thing that changes is the value.

所以，如果你调用 drawGraphFromJson 有两个不同的数据集，那么你需要设置 treemap.sticky（false），或者你需要将两个数据集合并为一个层次结构，然后改变value函数，

So, if you are calling drawGraphFromJson with two different sets of data, then you either need to set treemap.sticky(false), or you need to merge your two datasets into a single hierarchy and then change the value function to animate between the two.

此外：您尚未添加渲染代码，因此您的数据加入可能会出错。但是，我认为粘性解释更有可能。有关说明，请参见加入思考。

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.

这篇关于当根节点传递给它时，d3 treemap布局是否被缓存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！