關於d3.layout.pack（）的一些簡單問題

Question

請看看這個簡單的jsfiddle： http ： //jsfiddle.net/perikut/9qUVW/2/ （對不起，如果使用Firefox，我不知道為什么它看起來不太好......）

在我們的對象中，我們可以使用另一個詞而不是'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' }
        ]
    }
    , { .... } 

Answer 1

在D3的分層布局中 ，所有節點都填充了一組標准屬性 ，包括“父”屬性。 因此，您可以避免指定“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”的屬性中，從而覆蓋可能存在的任何內容。