d3.js v3和破坏的zoomable treemap示例

时间:2015-08-29 20:02:38

标签: javascript d3.js

我一直在尝试在我正在创建的可视化中调整以下示例。

http://bl.ocks.org/PMeinshausen/5806106

我挣扎了很长时间,因为在我的版本中,点击了#39;缩放不起作用。我最终想通了它,因为上面链接的例子使用了d3 v2。如果您使用v3,它将不再有效。因此,当我在v2中替换时,我的代码工作正常。

但是,我无法解释为什么它不适用于版本3.我已经查看版本3的release notes但是他们没有帮助我 - 可能是因为我不太了解他们。

但是,据我所知,问题不在于点击'事件绑定例如在这段代码中:

if(searched.equals("esc")) {
        cont = false;
}

由于某种原因,当你使用d3 v3时,d.children的数据似乎不存在。

任何人都可以了解出现问题的原因或指出我需要改变的代码部分的正确方向吗?非常感谢。

1 个答案:

答案 0 :(得分:1)

我认为可缩放树形图示例中的违规行是这一行:

    .children(function(d, depth) { return depth ? null : d.children; })

尝试用

替换它
    .children(function(d) { return d.children; })

我做了这个改变,发现树图的表现与我期望的一样。

根据d3 documentation,树形图布局使用的层次结构布局为每个节点添加了children属性,其中包含该节点的所有子节点的数组。碰巧这个例子中使用的JSON数据已经为子节点数组提供了这样的children属性。

如果不进行我的建议更改,上面的违规行告诉d3如果深度为0,节点只有子节点。如果深度为1或更大,则没有子节点。级别0的唯一节点是传递给{children: d.children}的{​​{1}}匿名对象。由于深度为1或更大的每个节点显然没有子节点,因此d3会从这些节点中删除treemap.nodes()属性。这会导致children处的数据丢失。

根据我建议的更改,d3计算每个节点的子节点数组,并且在每种情况下,它都匹配数据中的原始数组。因此,这种子阵列重新计算不会导致明显的变化。

据我所知,d3版本2没有以相同的方式计算和存储节点子节点,因此它不会破坏它找到的任何预先存在的数组。

因此,总而言之,如果您正在使用d3树形图(或任何其他分层布局),并且您的数据使用名称为d.children且包含子节点数组的属性进行结构化,那么请小心如何告诉treemap在数据中查找子节点。