Javascript D3强制布局-按名称而不是索引链接节点

我试图通过ID而不是索引链接d3节点（节点ID由我的应用程序生成）

以下是我的节点：

"Nodes": [
    {
      "Id": "338",
      "Name": "TEST NODE ONE",
      "Url": "http://www.google.com"
    },
    {
      "Id": "340",
      "Name": "TEST NODE TWO",
      "Url": "http://www.yahoo.com"
    },
    {
      "Id": "341",
      "Name": "TEST NODE THREE",
      "Url": "http://www.stackoverflow.com"
    },
    {
      "Id": "342",
      "Name": "TEST NODE FOUR",
      "Url": "http://www.reddit.com"
    }
  ]

它们当前通过索引链接：

  "links": [
    {
      "source": 0,
      "target": 0,
      "value": "0"
    },
    {
      "source": 0,
      "target": 1,
      "value": "0"
    },
    {
      "source": 1,
      "target": 2,
      "value": "0"
    },
    {
      "source": 3,
      "target": 2,
      "value": "0"
    }
  ]

但是，我想通过“Id”链接它们：

我尝试了这里提出的解决方案：

通过在调用force.nodes之前添加以下行：

  // make links reference nodes directly for this particular data format:
  var hash_lookup = [];
  // make it so we can lookup nodes in O(1):
  json.Nodes.forEach(function(d, i) {
    hash_lookup[d.Id] = d;
  });
  json.Links.forEach(function(d, i) {
    d.source = hash_lookup[d.Source];
    d.target = hash_lookup[d.Target];
  });

我已经试过调试上面的内容，但我无法找到答案。我收到以下错误消息（这通常意味着我没有正确设置链接）：

未捕获类型错误：无法读取未定义的属性“权重”

---

链接到我的完整JS:

这里有一个简单的方法：

var edges = [];
json.Links.forEach(function(e) {
    var sourceNode = json.Nodes.filter(function(n) {
        return n.Id === e.Source;
    })[0],
        targetNode = json.Nodes.filter(function(n) {
            return n.Id === e.Target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});

force
    .nodes(json.Nodes)
    .links(edges)
    .start();

var link = svg.selectAll(".link")
    .data(edges)
    ...

---

这是一张工作票。（为了安全起见，您应该分叉它，以防我无意中删除它。）

为什么

sourceNode

和

targetNode

可以引用原始节点数组中的对象？是因为DOM元素最终会引用原始节点数组中完全相同的对象吗？（通过这里的

force.nodes（json.nodes）…start（）

）将索引转换为节点：因此，这里的代码跳过了该步骤，因为输出就是链接对象最终的样子。非常棒！谢谢我已将您的更改应用于我的代码，但错误“无法读取未定义的属性‘权重’”。。。我不知道。。。请看：请看这些。

var edges = [];
json.Links.forEach(function(e) {
    var sourceNode = json.Nodes.filter(function(n) {
        return n.Id === e.Source;
    })[0],
        targetNode = json.Nodes.filter(function(n) {
            return n.Id === e.Target;
        })[0];

    edges.push({
        source: sourceNode,
        target: targetNode,
        value: e.Value
    });
});

force
    .nodes(json.Nodes)
    .links(edges)
    .start();

var link = svg.selectAll(".link")
    .data(edges)
    ...