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

Question

我正在尋找一種在數據更改時更新多個節點屬性和附加元素的方法。

這就是我現在正在嘗試做的事情。 該函數稱為每次節點或鏈接數據更改。

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

預期的行為是，當兩個節點相互拖動時，它們會創建一個鏈接，而鏈接越多，它們就會變得越大。

Answer 1

您附加的文本正在更新。 唯一的問題似乎是而不是替換舊文本，而是在頂部添加了<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 Bin中進行了這些更改，它似乎對我有用（稍有延遲）： http : //jsbin.com/goqumutelu/edit?html ,js, output

每當按下鏈接時dragend（）函數中就會有一個延遲（不確定是否是故意的嗎？）因此，如果您不希望延遲，請刪除超時，或者將延遲值（1500）替換為0即可解決。那： http : //jsbin.com/hazecozumu/1/edit?html , js，輸出

關於節點的大小，這是怎么回事？ 您還想如何更新？