解释Mike Bostock Node-Parsing Loop [英] Explain Mike Bostock Node-Parsing Loop

问题描述

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

I'm relatively new to JavaScript and d3, but I'm really interested in force-directed layouts. In Mike Bostock's force-directed visualizations, he tends to parse nodes from a list of links using the following code (or similar):

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});
});

我完全理解他最终在这里完成的工作，我只想了解<$中的JavaScript语法c $ c> forEach 循环更好（实际上，根本）。如果有人可以解释，我真的很感激。

I completely understand what he ultimately accomplishing here, I just want to understand the JavaScript syntax in the forEach loop better (actually, at all). If someone could explain, I'd really appreciate it.

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

It's obviously very elegant code, but I can't find an explanation anywhere on the internet - I'm probably missing a key term in my searches, so I'm reluctantly asking the question here. What is really throwing me off:

• || do，


• 每行第一次分配的顺序（每个 || 的左侧）：为什么它是 link.source = nodes [link.source] 不是 nodes [link.source] = link.source ，例如。

• What the two assignments on either side of the || do ,
• The order of the first assignment of each line (left-hand side of each ||): why is it link.source = nodes[link.source] not nodes[link.source] = link.source, for instance.

推荐答案

在下面的代码中

link.source = nodes [link.source] || （nodes [link.source] = {name：link.source}）;

这意味着

link.source = nodes [link.source]

if nodes [link.source] 未定义。

如果 nodes [link .source] 未定义然后下面的块将被执行。

If nodes[link.source] is undefined then block below will get executed.

（节点[ link.source] = {name：link.source}）//为节点分配新值[link.source]

及以上value将被设置为 link.source

and the above value will be set to link.source

所以如果你把它变得简单就像：

So if you make it simple it would be like:

link.source = nodes [link.source] || （nodes [link.source] = {name：link.source}）;
相当于：

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

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等于a = b但如果b未定义则a = c，对吧？）

是

问题还有什么不合理的是为什么这些作业的左侧是link.source和link.target？这些​​已定义，它们是我们想用节点填充节点的吗？

Question What still doesn't make sense is why the left side of these assignments are link.source and link.target?Those are already defined, they're what we want to populate nodes with?

是的！你在这里是正确的那些已经定义了。
link.source当前=A
块执行后，每个link.source都将指向一个对象，就像这样。 link.source = {name：A}

Yes! you are correct here Those are already defined. link.source is currently = "A" After the block executes each link.source will be pointing to an object, something like this. link.source = {name:A}

如果您仍然感到困惑，请告诉我。

Let me know if you still have confusion.

这篇关于解释Mike Bostock Node-Parsing Loop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！