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

IT技术 javascript json d3.js
2021-01-23 11:56:23

我试图通过 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/

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。（为了安全起见，你应该分叉它，以防我无意中删除它。）

在这里，indeces被转换为节点：github.com/mbostock/d3/blob/master/src/layout/... 所以，这里的代码跳过了这一步，因为输出是链接对象最终的样子。
2021-03-15 11:56:23
非常棒！谢谢！
2021-03-19 11:56:23
那是什么原因sourceNode和targetNode可以是原始节点阵列中的对象的引用？是因为 DOM 元素最终会引用原始节点数组中的那些完全相同的对象吗？(通过force.nodes(json.Nodes).....start())
2021-03-22 11:56:23
我已将您的更改应用于我的代码，但错误“无法读取未定义的属性‘权重’”仍然存在……我不知道……请参阅：plnkr.co/edit/OhRrufGi7yF42umrhdBX?p=preview
2021-04-01 11:56:23
请参阅这些SO 答案。
2021-04-11 11:56:23
其它你可能感兴趣的问题
上一篇在 angularjs 工厂中使用 setInterval 下一篇通过 Javascript 访问我的整个浏览历史