javascript 执行顺序(以 d3-force 为例)

Question

https://observablehq.com/@d3/force-directed-graph我试图理解这段代码，以便弄清楚 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 有forceSimulation 需要的所有变量，包括index, x, y, vx, vy.

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

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

Answer 1

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

作为documentation states ,

Each node must be an object. The following properties are assigned by the simulation:

• index - the node’s zero-based index into nodes
• x - the node’s current x-position
• y - the node’s current y-position
• vx - the node’s current x-velocity
• vy - the node’s current y-velocity

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