為什么在更新 d3.js 強制布局時必須重新分配鏈接和節點

Question

在這個例子中，每個人都引導我，代碼編寫者在start()方法中重新分配 var link和node 。 我真的不明白為什么。 由於兩個片段是相同的，我將專注於一個片段：

link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("line", ".node").attr("class", "link");
link.exit().remove();

Q 1： link已經被分配為var link = svg.selectAll(".link"); 意思是link包含.link的svg容器中的所有 DOM 元素。 這個選擇在示例開始時可能是空的，但他為什么要將它重新分配給力中的所有鏈接？

Q 2：為什么他返回d.source.id和d.target.id屬性？ 這是否有必要識別鏈接？

問題 3：其他操作（例如給鏈接添加顏色）會像這樣完成嗎？

link.enter().insert("line", ".node").attr("class", "link").style("stroke", function(d) { 
    return d.color;
});

Answer 1

問題一：

就像你最初說的，它的空var link = svg.selectAll(".link"); 但是當數據進入start函數時，這個變量保存所有當前鏈接。

問題2

Q 2：為什么他返回d.source.id和d.target.id屬性？ 這是否有必要識別鏈接？

link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });

這樣做是為了唯一地標識一個鏈接。 該函數返回鏈接的唯一 ID，它是源 ID 和目標 ID 的組合。 需要這樣退出功能才能知道在相交后需要刪除哪個鏈接。

問題三

問題 3：其他操作（例如給鏈接添加顏色）會像這樣完成嗎？

link.enter().insert("line", ".node").attr("class", "link").style("stroke", function(d) { 
    return d.color;
});

是的。 如果鏈接數據中有可變顏色。 像這樣{source: a, target: b, color:"red"}代碼在這里

希望這可以幫助！