javascript执行顺序(d3-force中的示例)

Question

https://observablehq.com/@d3/力有向图我试图理解这段代码，以便弄清楚d3-force是如何工作的。

我跟踪变量nodes，看看它们是如何为它们分配位置的。

// Replace the input nodes and links with mutable objects for the simulation.
console.log(nodes); // Added by me
nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
console.log(nodes); // Added by me
links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));

不知何故，d3.map之后的变量nodes具有力仿真所需的所有变量，包括index、x、y、vx、vy。

我认为这更多地与javascript如何执行下面的函数有关，而不是d3本身，但我不知道如何执行。

我也打印了N，但没有什么特别之处。只是id值，正如前一段代码中所期望的那样。

Answer 1

您提到的那些属性是由模拟本身创建的，在将节点传递给模拟之后。

正如文件所述，

每个节点都必须是一个对象。以下属性由模拟指定：

• index-节点到节点的从零开始的索引
• x-节点的当前x位置
• y-节点的当前y位置
• vx-节点的当前x速度
• vy-节点的当前y速度

当您第一次记录节点时，它们没有这些属性。但是，模拟运行后，这些属性将显示在已登录控制台的对象上。例如，在Chrome中，你会看到一个蓝色图标，上面写着">"下面的对象刚刚被评估">。如果执行console.log(JSON.stringify(nodes))而不是console.log(nodes)，则会看到原始对象。