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

一尘不染

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

json

我试图通过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”链接它们：

  "Links": [
    {
      "Source": "338",
      "Target": "338",
      "Value": "0"
    },
    {
      "Source": "338",
      "Target": "340",
      "Value": "0"
    },
    {
      "Source": "340",
      "Target": "341",
      "Value": "0"
    },
    {
      "Source": "342",
      "Target": "341",
      "Value": "0"
    }
  ]

我已经尝试过此处提出的解决方案：https
:
//groups.google.com/forum/#!msg/d3-js/LWuhBeEipz4/0kZIojCYvhIJ

通过在调用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];
  });

我已经尝试调试上述内容，但无法设法解决。我收到以下错误消息（通常意味着我没有正确设置链接）：

Uncaught TypeError: Cannot read property 'weight' of undefined

链接到我的完整JS：http :
//jsfiddle.net/9sMrw/

阅读 315

2020-07-27

共1个答案

一尘不染

这是一种简单的方法：

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)
    ...

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

2020-07-27