我目前正在尝试用d3js v4构建一个力导向图.我有以下节点和链接,实际上非常简单
节点
[ { "id":"4d2b0275-5bc7-e611-81c4-00155df7ea33" },{ "id":"b32b0275-5bc7-e611-81c4-00155df7ea33" } ]
链接
[ { "source":"4d2b0275-5bc7-e611-81c4-00155df7ea33", "target":"b32b0275-5bc7-e611-81c4-00155df7ea33" } ]
我的forceSimulation设置是
var simulation = d3.forceSimulation(nodes) .force("charge", d3.forceManyBody()) .force("link", d3.forceLink(links).distance(20).strength(1)) .force("x", d3.forceX()) .force("y", d3.forceY()) .stop()
它会在d3.forceLink(链接)上引发错误Uncaught Error: missing: 4d2b0275-5bc7-e611-81c4-00155df7ea33
.那么为什么这个错误因为链接实际上存在?
在D3中,默认的link.id()访问器函数:
允许将每个链接的源和目标指定为节点数组中从零开始的索引.
这意味着源和目标由节点的索引定义,如API中的此示例所示:
var links = [ {"source": 0, "target": 1}, //from the first node to the second {"source": 1, "target": 2} //from the second node to the third ];
但是,由于您要通过id
节点而不是数字索引来定义源和目标,因此必须在id()
函数中指定此id :
.force("link", d3.forceLink(links) .id(function(d,i) { return d.id }) .distance(20) .strength(1) )