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

2個代碼片段的結果之間存在一個顯着差異。

第一個通過引用鏈接source節點和target節點。 它們指向nodes數組中的對象。

第二個創建新對象。 它們與nodes名稱相同，但它們在內存中是不同的對象。

D3強制布局要求鏈接通過引用或數組中的索引指向節點。 如果指定索引，它們將被轉換為引用 ：

注意：source和target屬性的值最初可以指定為nodes數組的索引; 在調用start之后，這些將被引用替換。