D3 强制布局 - 按名称而不是索引链接节点 [英] D3 force layout - linking nodes by name instead of index

问题描述

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

I am attempting to link d3 nodes by an ID instead of index (The node ID is generated by my application).

这是我的节点:

"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"
    }
  ]

它们当前通过索引链接:

They are currently linked by index:

  "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"链接它们:

However, I want to link them by "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

I've attempted the solution proposed here: https://groups.google.com/forum/#!msg/d3-js/LWuhBeEipz4/0kZIojCYvhIJ

在调用 force.nodes 之前添加以下几行:

by adding the following lines before calling 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];
  });

我试过调试上面的，但我无法弄清楚.我收到以下错误消息(这通常意味着我没有正确设置链接):

I've tried debugging the above, but I can't manage to figure it out. I get the following error message (which usually means I haven't set links correctly):

未捕获的类型错误:无法读取未定义的属性权重"

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

Link to my full JS: http://jsfiddle.net/9sMrw/

推荐答案

这是一个简单的方法:

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.(为了安全起见，你应该分叉它，以防我不小心删除它.)

Here is a working PLUNK. (You should fork it to be safe, in case I inadvertently delete it.)

这篇关于D3 强制布局 - 按名称而不是索引链接节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！