2012-03-02 95 views
7

我正在構建一個樹結構(或者更確切地說是用我自己的json中的一組自己的數據修改其中一個示例)樹例如: http://mbostock.github.com/d3/ex/cluster.html在d3.js中摺疊/展開樹的子節點?

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

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

我該怎麼辦?

回答

1

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

+0

強制導向佈局是良好的圖形可視化,但它是不理想的樹木。 – mariosangiorgio 2012-11-14 17:58:52

+0

如果你看看源代碼,你可以看到它是一個強制定向佈局並不重要,同樣的解決方案可以用於任何DAG(即圖中沒有循環),其中包括樹。我將在特定的答案中添加特定的代碼(以防鏈接最終破裂)。 – forforf 2013-02-15 13:30:48

1

有幾種方法,一種是使用普通的坐姿來隱藏孩子的標記(不透明度: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(); 
}