D3 Sticky Zoomable Treemaps

时间:2014-09-23 18:35:47

标签: d3.js

我正在尝试将过渡应用于可缩放的树形图,如Mike Bostock的示例所示:http://bost.ocks.org/mike/treemap/

特别是,我想将树形图标记为粘性,这样当我求助时,在数据层次结构的任何级别,单元格都保持相同的顺序。但是,启用粘性标记时接口失败。 Here's the JSFiddle,第404行是创建粘滞值的行,在取消注释时不起作用。以下是树图:

var treemap = d3.layout.treemap()
.children(function(d, depth) { return depth ? null : d._children; })
.sort(function(a, b) { return a.value - b.value; })
 // .sticky(function(d){return true;})
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);

在D3 API中,我注意到下面这一行,但我不确定在解析数据时如何将每个树图重新调用为粘性。有什么想法吗?

  

实施说明:粘性树图在内部缓存节点数组;因此,无法在多个数据集上重复使用相同的布局实例。要在切换具有粘性布局的数据集时重置缓存状态,请再次调用sticky(true)。从版本1.25.0开始,层次结构布局在每次调用时都不再默认复制输入数据,因此可以消除缓存并使布局完全无状态。

0 个答案:

没有答案