关于d3.layout.pack()的一些简单问题

时间:2012-07-28 21:53:35

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

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

enter image description here

在我们的对象中,我们可以使用另一个单词而不是'children'来表示从哪里提取数据? (我看到的所有示例都遵循此数据结构,请参阅下文)。我们应该在哪里表明?

我认为我的代码非常缺乏(请参阅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' }
        ]
    }
    , { .... } 

1 个答案:

答案 0 :(得分:4)

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

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; });

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

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