关于 d3.layout.pack() 的几个简单问题答案

【问题标题】：A few simple questions about d3.layout.pack()关于 d3.layout.pack() 的几个简单问题
【发布时间】：2012-07-27 03:26:42
【问题描述】：

请看一下这个简单的 jsfiddle：http://jsfiddle.net/perikut/9qUVW/2/（对不起，如果使用 Firefox，我不知道为什么它看起来不太好......）

在我们的对象中，我们可以使用“孩子”以外的其他词来表示从哪里提取数据吗？（我看到的所有例子都遵循这个数据结构，见下文）。我们应该在哪里指出？

我认为我的代码非常有缺陷（请参阅 jsfiddle），因为我不得不声明两次 'group' 参数以便从组/父项中显示/隐藏子项。

没有办法直接选择 group1 的子节点并应用动画吗？我以后想要一个更复杂的数据结构，所以我需要先了解这种基础知识。

当前数据结构：

data = {
name:'root',
group:'no_group',
children:[
    {
        group: 'group1',
        children:[
            { group:'group1',name:'a1',value:10,color:'red' },
            { group:'group1',name:'a2',value:40,color:'lightcoral' }
        ]
    }
    , { .... }

【问题讨论】：

标签： javascript json d3.js transitions circle-pack

【解决方案1】：

在 D3 的 hierarchical layouts 中，所有节点都填充有一组 standard attributes，包括“父”属性。因此，您可以避免指定“组”属性，而在选择特定节点的子节点时使用“父”：

d3.selectAll("circle").filter(function(d) { return d.parent.name === "foo"; });

或者，如果您有对节点对象本身的引用，则可以按对象引用进行比较。

var parent = nodes.filter(function(d) { return d.name === "foo"; });
d3.selectAll("circle").filter(function(d) { return d.parent === parent; });

这里我假设每个节点都有一个“名称”属性。

您还提到使用从不同属性中检索子项。是的，这可以使用"children" accessor 来实现。请注意，这会将节点的子节点存储在该节点上名为“children”的属性中，从而覆盖可能已经存在的任何内容。

【讨论】：