如何使用代碼刪除D3樹節點？

我有這個小提琴http://jsfiddle.net/Deansmithok/3HeU9/如何使用代碼刪除D3樹節點？

我想刪除一個節點（和它的鏈接）

在我最後一次嘗試：

我已經在DOM保存在該d.id爲$（ '#inpSelidTAUsers'）。VAL（）然後試圖驗證碼...

svgGroup.selectAll('path.link').filter(function(d, i) 
    { 
    if (d.target.id == $('#inpSelidTAUsers').val()) 
    return true; else return false; 
    }).remove(); 

svgGroup.selectAll('g.node').data(nodes).filter(function(d, i) 
    { 
    if (d.id == $('#inpSelidTAUsers').val()) 
    return true; else return false; 
    }).remove();

此代碼消除屏幕上的節點和鏈路。但是如果我調用DrawItAll（root）然後再調用節點RE-APPEARS。請告訴我怎樣可以刪除節點，以便它保持GONE :)

來源

2014-02-18 Dean Smith

那麼，你是從d3選擇中刪除節點和鏈接，但不是從數據中刪除。所以，一旦你再次渲染數據，它會顯示出來。或者我錯過了什麼？ – FernOfTheAndes

當然，我的意思是表示節點和鏈接的數據。您需要從數據集中刪除它。 – FernOfTheAndes

嗨。你是對的 - 我不更新的數據集...只是我不知道該怎麼做。我看不到如何訪問數據集。 –

您的選擇返回元素g.node，雖然你從視圖中刪除它，看來你重新綁定，unhanged。既然你沒有改變基礎數據，當你重新綁定它時，你會得到第一次得到的結果。

如果您希望節點以後，你需要改變的數據集。您的數據是在這個對象：

treeData = { 
    'name': 'Me','POS':'CEO','children': 
    [ 
    {'name': 'Mr X','POS':'Sales Manager'}, 
    {'name': 'Mr Y','POS':'Architect'}, 
    {'name': 'Mr Z','POS':'Finance Assistant','children':[{'name': 'Mr U','POS':'Window Cleaner'}]}, 
    ] 
    };

最乾淨的方法能夠去除子節點從treeData可能是這樣的函數添加到對象：

treeData.removeChild = function(idxToRemove) { 
    var i, len, results; 
    results = []; 
    for (i = 0, len = this.children.length; i < len; i++) { 
    if (i !== idxToRemove) { 
     results.push(treeData.children[i]); 
    } 
    } 
    this.children = results; 
};

那麼你只是調用要刪除的元素的索引，例如：

treeData.removeChild(2) // removes the last child

然後重新綁定數據並更新視圖。

來源

2014-02-18 15:22:58

嗨。這工作。這是「treeData」或「根」，我不得不一起工作。謝謝 –

如何使用代碼刪除D3樹節點？

回答

相關問題