在d3.js中摺疊/展開樹的子節點？

Question

我正在構建一個樹結構（或者更確切地說是用我自己的json中的一組自己的數據修改其中一個示例）樹例如： http://mbostock.github.com/d3/ex/cluster.html

我正在向圈子添加一個onclick事件，我想摺疊點擊節點的子節點。也就是說，當用戶點擊與節點相關的鋼藍圈時，我希望該節點的子節點消失。

我已經搜遍了文檔，還沒有發現任何可以讓我使節點崩潰或消失的東西。

我該怎麼辦？

Answer 1

有這樣的：

http://mbostock.github.com/d3/talk/20111018/tree.html

有許多其他來自我的SVG Open keynote的交互式分層佈局示例。

Answer 2

不幸的是，我仍然在與D3的速度，並不知道如何最好地回答你的問題。但這裏有一個力導向佈局，它允許你通過點擊顯示/隱藏節點，這可能給你一些想法：http://bl.ocks.org/1062288

Answer 3

有幾種方法，一種是使用普通的坐姿來隱藏孩子的標記（不透明度：0或顯示：無）。但是，這只是使數據不可見，樹保持其形狀，就好像數據在那裏一樣，你看不到它。

通常情況下，您會希望該樹假裝數據不存在並進行相應更新，因爲您可以使用與上述鏈接中的強制佈局示例相同的方法。

它歸結爲： 1）使用功能來構建D3樹 2）追加一個click事件可摺疊節點 3）單擊事件重命名節點的子屬性，並以1調用函數），它重繪沒有該節點的子節點的樹。

下面是鏈接相關的代碼在nkoren的答案（http://bl.ocks.org/1062288）：

function update() { 
    // build the tree layout here 
    // append on("click", click) to the collapsible nodes 
} 

// Toggle children on click 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
}