如何將鏈接動態添加到D3樹

我正在嘗試將鏈接動態添加到樹中以創建新關係。我的意圖是開發一個流程圖，而不是一棵樹。如何將鏈接動態添加到D3樹

該代碼似乎在第一時間正常工作，但隨後，在其中一個節點上顯示引導彈窗後，我的新鏈接消失。我在想，這棵樹正在被「重新繪製」，我的臨時鏈接並未包含在內。

這裏是如何看起來「默認」： enter image description here

下面是它的外觀與我的新鏈接： enter image description here

一些循環後，我拿到應連接節點的ID ，然後我得到這些節點的引用，並最終將這些對連接到tree.links的輸出。下面是代碼

//Create links 
var newLinkPairs = getNodeReferencesForLinks(nodes, newLinksIds); 
//Add new pair to the links based on the removed duplicates 
var linkPairs = tree.links(nodes).concat(newLinkPairs); 

var linkEnter = g.selectAll(".node-link") 
.data(linkPairs) 
.enter(); 

linkEnter 
.insert("path", "g") 
.attr("class", "node-link") 
.attr("d", (function(d, i){return createConnector(nodeHeight, nodeWidth)})()) 
.attr("marker-end", "url(#source-target-marker)");

這些都是輔助功能：

function createConnector(nodeHeight, nodeWidth) { 
    return d3.svg.diagonal() 
    .source(function(d) { 
     return { 
      y: d.source.y + nodeWidth, 
      x: ((d.source.height - nodeHeight) /2) + d.source.x}; }) 
      .target(function(d) { 
       return { 
        y: d.target.y, 
        x: ((d.target.height - nodeHeight) /2) + d.target.x}; }) 
        .projection(function(d) { return [d.y, d.x]; });  
} 

function getNodeReferencesForLinks(nodes, newLinksIds){ 
    var newLinkPairs =[]; 

    _.each(newLinksIds, function(p){ 
     var s = _.findWhere(nodes, {id: p.source}); 
     var t = _.findWhere(nodes, {id: p.target}); 

     newLinkPairs.push({source:s,target:t}); 
     // console.log(s.tasks.join(',') + ' -> ' + t.tasks.join(',')); 
    }); 

    return newLinkPairs; 
}

有沒有更好的方式來做到這一點？

來源

2013-08-28 Ulises

這聽起來像寫我自定義佈局（可能基於樹佈局）將是最好的選擇。 –

上面的代碼實際上按照它的設想工作。鏈接正在消失，因爲創建圖形的函數在顯示彈出窗口時被調用。

這裏的基本問題是變異。創建該圖形的功能正在修改原始結構，因此連續調用無法創建新鏈接。

底線：突變是邪惡的。

來源

2013-08-29 18:16:32 Ulises

如何將鏈接動態添加到D3樹

回答

相關問題