javascript - 使用节点名称作为链接的 d3 力图

Question

我已经在这几天了，我已经看到了 stackoverflow 和其他地方的问题，但我遗漏了一些东西。

假设我们有以下 JSON:

{
  "nodes":[
    {"name":"node1"},
    {"name":"node2"},
    {"name":"node3"},
    {"name":"node4"}
 ],
  "links":[
    {"source":"node1","target":"node2"},
    {"source":"node1","target":"node3"},
    {"source":"node1","target":"node4"}
  ]
}

为什么以下两段代码在控制台中产生相同的输出，但第二段代码给我一个错误(Uncaught TypeError:无法读取未定义的属性“push”)？

links = links.map(function(l) {
  var sourceNode = nodes.filter(function(n) { return n.name === l.source; })[0];
  var targetNode = nodes.filter(function(n) { return n.name === l.target; })[0];
  return {
    source: sourceNode,
    target: targetNode
  };
});

_

links.forEach(function(link) {
  link.source = {name: link.source};
  link.target = {name: link.target};
});

控制台输出:

[{"source":{"name":"node1"},"target":{"name":"node2"}},
 {"source":{"name":"node1"},"target":{"name":"node3"}},
 {"source":{"name":"node1"},"target":{"name":"node4"}}]

Answer 1

两个代码片段的结果之间存在显着差异。

第一个通过引用链接源和目标节点。它们指向 nodes 数组中的对象。

第二个创建新对象。它们与节点中的名称相同，但它们在内存中是不同的对象。

D3 强制布局要求链接点通过引用或数组中的索引指向节点。如果您指定索引，它们将由 transformed to references无论如何:

Note: the values of the source and target attributes may be initially specified as indexes into the nodes array; these will be replaced by references after the call to start.