解释 Mike Bostock 节点解析循环

Question

我对 JavaScript 和 d3 比较陌生，但我对力导向布局非常感兴趣。在 Mike Bostock 的力导向可视化中，他倾向于使用以下代码（或类似代码）从链接列表中解析节点：

var links = [
    {source: "A", target: "B"},
    {source: "B", target: "C"},
    {source: "C", target: "A"}];

var nodes = {};

links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

我完全理解他最终在这里完成的事情，我只是想更好地理解 forEach 循环中的 JavaScript 语法（实际上，一点也不）。如果有人能解释一下，我将不胜感激。

这显然是非常优雅的代码，但我无法在互联网上的任何地方找到解释 - 我可能在搜索中遗漏了一个关键术语，所以我不情愿地在这里问这个问题。真正让我失望的是：

||两边的两个赋值是做什么的，
每行第一次赋值的顺序（每行左边||）：为什么是link.source = nodes[link.source]而不是nodes[link.source] = link.source，比如

Answer 1

在下面的代码中

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

表示

link.source = nodes[link.source]

如果 nodes[link.source] 是 未定义。

如果 nodes[link.source] 是 undefined 那么下面的块将被执行。

(nodes[link.source] = {name: link.source})//assigning new value to nodes[link.source]

并且上面的值将设置为link.source

因此，如果您将其简化为：

link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); 相当于：

if (!nodes[link.source]) {//not undefined
 link.source = nodes[link.source];
} else {
 nodes[link.source] = {name: link.source}
 link.source = nodes[link.source];
}

希望对您有所帮助！

评论说明

问题 (a = b || c equates to a = b but if b is undefined make a = c, right?)

是

问题仍然没有意义的是为什么这些赋值的左边是link.source和link.target？那些已经定义好了，他们这是我们想要用来填充节点的东西吗？

是的！你在这里是正确的 Those are already defined。 link.source 目前 = "A" 在块执行后，每个 link.source 将指向一个对象，就像这样。 link.source = {name:A}

如果您仍有困惑，请告诉我。

解释 Mike Bostock 节点解析循环

Explain Mike Bostock Node-Parsing Loop

javascript

d3.js

network-analysis

d3-force-directed