如何更新D3.js強制圖中的節點數據？

我正在尋找更新數據更改的多個節點屬性和附加元素的方法。如何更新D3.js強制圖中的節點數據？

這就是我現在想要做的。該函數被調用每次節點或鏈接數據更改。

function restart() { 

    link = link.data(links); 

    link 
    .enter().insert("line", ".node") 
    .attr("class", "link") 
    .on('click' , function(d, i){ 
     console.log(d); 
     links.splice(i,1); 
     restart(); 
    }) 
    .on("mouseover", function() { 
     d3.select(this).style("stroke","red"); 
     d3.select(this).style("stroke-width","5px"); 
    }) 
    .on("mouseout", function() { 
     d3.select(this).style("stroke","#999"); 
     d3.select(this).style("stroke-width","initial"); 
    }); 

    link 
    .exit().remove(); 

    node = node.data(nodes); 

    node 
    .enter() 
    .append("g") 
    .attr("class", "node") 
    .call(node_drag); 

    node 
    .insert("circle", ".cursor") 
    .attr("r", function(d) { return calcSize(d.links+1); }) 

    node 
    .append("text") 
    .attr("dx", 12) 
    .attr("dy", ".35em") 
    .text(function(d) { return d.links }); 

    node 
    .exit().remove(); 

    force.start(); 

}

在當前狀態下的完整代碼可以在這裏看到：http://jsbin.com/takatugazo/edit?html,js,output

預期的行爲是，當兩個節點被拖入他們創造了一個鏈接，鏈接越多，他們有更大的對方，他們得到。

來源

2016-05-20 coiso

我看到您的代碼按預期工作，您的問題到底是什麼？ – paradite

不是，附加的文本是最清楚的證據，它不是，它應該在d.links更改時更新。節點的大小也不會更新，但我相信找出如何更新文本會告訴我如何解決這個問題 – coiso

您的附加文本正在更新。唯一的問題似乎是，不是替換舊文本，而是在頂部添加一個<text>元素。如果你只是檢查一個節點，你會根據它有多少鏈接找到多個<text>元素。出於某種原因，您的代碼不會按照它應該的方式更新文本。

嘗試刪除文本元素你追加一個前：

node.select("text").remove() 

node 
.append("text") 
.attr("dx", 12) 
.attr("dy", ".35em") 
.text(function(d) { return d.links }); 

node 
.exit().remove();

我在JS斌做出這些改變，它似乎爲我工作（有一點的延遲）：http://jsbin.com/goqumutelu/edit?html,js,output

有是dragend（）函數的延遲，每當鏈接被推送時（不確定是否有意？）因此，如果你不想延遲：消除超時，或者簡單地將延遲值（1500）替換爲0應該解決：http://jsbin.com/hazecozumu/1/edit?html,js,output

A回合節點的大小，它有什麼不對？你還有什麼要更新？

來源

2016-05-20 21:42:54 Naumb

如何更新D3.js強制圖中的節點數據？

回答

相關問題