javascript - 为什么更新 d3.js 强制布局时必须重新分配链接和节点

Question

在 this example ，每个人都引导我到这里，代码编写者在 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();

问题 1:link 已指定为 var link = svg.selectAll(".link"); 表示 link包含类为 .link 的 svg 容器中的所有 DOM 元素。这个选择在示例开始时可能是空的，但为什么他将其重新分配给强制中的所有链接？

问题 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

问题 1:

就像你最初所说的，它是空的 var link = svg.selectAll(".link");但是当数据进入 start 函数时，此变量保存所有当前链接。

问题2

问题2:为什么他要返回d.source.id和d.target.id属性？是否有必要识别链接？

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

这样做是为了唯一地标识链接。该函数返回链接的唯一 ID，它是源 ID 和目标 ID 的组合。需要这样退出函数才能知道在交叉点后需要删除哪个链接。

问题3

问题 3:其他操作(例如为链接添加颜色)会这样完成吗？

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

是的!如果链接数据中有可变颜色。像这样的 {source: a, target: b, color:"red"}代码here

希望这有帮助!