我想要的力模拟在节点之间有边缘。为了让d3模拟所有东西的位置，这些边应该有一个.source和.target。我使用字符串指定了这些源和目标，而不是您在大多数教程中使用节点列表中该项的索引所看到的方式。
Mike Bostock本人在此描述了这种方式的工作原理： https://bl.ocks.org/mbostock/533daf20348023dfdd76
但D3无法找到节点，如果你看看我的jsfiddle，它在尝试链接边缘列表中的第一条边时已经失败了。我究竟做错了什么？所有的想法赞赏！我自己并不知道如何调试这个，因为映射发生在d3js的幕后。
链接到一个最小的例子： https://jsfiddle.net/wouterwouter/q2zec0no/1/
var data = {
"edges": [{
"index": 0,
"keggreactionid": "R05300",
"source": "C04559",
"target": "C04112",
"hits": "01416-1_AHCVY7AFXX_S",
"enzymename": "muconate cycloisomerase;\nmuconate cycloisomerase I;\ncis,cis-muconate-lactonizing enzyme;\ncis,cis-muconate cycloisomerase;\nmuconate lactonizing enzyme;\n4-carboxymethyl-4-hydroxyisocrotonolactone lyase (decyclizing);\nCatB;\nMCI;\n2,5-dihydro-5-oxofuran-2-acetate lyase (decyclizing);\n2,5-dihydro-5-oxofuran-2-acetate lyase (ring-opening)\n",
"root": null,
"color": null
}, {
"index": 1,
"keggreactionid": "R05299",
"source": "C06730",
"target": "C04112",
"hits": "01416-1_AHCVY7AFXX_S",
"enzymename": "catechol 1,2-dioxygenase;\ncatechol-oxygen 1,2-oxidoreductase;\n1,2-pyrocatechase;\ncatechase;\ncatechol 1,2-oxygenase;\ncatechol dioxygenase;\npyrocatechase;\npyrocatechol 1,2-dioxygenase;\nCD I;\nCD II\n",
"root": null,
"color": null
}, {
"index": 2,
"keggreactionid": "R05299",
"source": "C00007",
"target": "C04112",
"hits": "01416-1_AHCVY7AFXX_S",
"enzymename": "catechol 1,2-dioxygenase;\ncatechol-oxygen 1,2-oxidoreductase;\n1,2-pyrocatechase;\ncatechase;\ncatechol 1,2-oxygenase;\ncatechol dioxygenase;\npyrocatechase;\npyrocatechol 1,2-dioxygenase;\nCD I;\nCD II\n",
"root": null,
"color": null
}, {
"index": 3,
"keggreactionid": "R05865",
"source": "C06760",
"target": "C00058",
"hits": "15416-7_AHCVY7AFXX_S",
"enzymename": "2-hydroxymuconate-6-semialdehyde hydrolase;\n2-hydroxy-6-oxohepta-2,4-dienoate hydrolase;\n2-hydroxymuconic semialdehyde hydrolase;\nHMSH;\nHOD hydrolase;\nxylF (gene name);\n2-hydroxymuconate-semialdehyde formylhydrolase;\n2-hydroxymuconate-semialdehyde hydrolase\n",
"root": null,
"color": null
}, {
"index": 4,
"keggreactionid": "R05865",
"source": "C06760",
"target": "C11354",
"hits": "15416-7_AHCVY7AFXX_S",
"enzymename": "2-hydroxymuconate-6-semialdehyde hydrolase;\n2-hydroxy-6-oxohepta-2,4-dienoate hydrolase;\n2-hydroxymuconic semialdehyde hydrolase;\nHMSH;\nHOD hydrolase;\nxylF (gene name);\n2-hydroxymuconate-semialdehyde formylhydrolase;\n2-hydroxymuconate-semialdehyde hydrolase\n",
"root": null,
"color": null
}, {
"index": 5,
"keggreactionid": "R05865",
"source": "C00001",
"target": "C00058",
"hits": "15416-7_AHCVY7AFXX_S",
"enzymename": "2-hydroxymuconate-6-semialdehyde hydrolase;\n2-hydroxy-6-oxohepta-2,4-dienoate hydrolase;\n2-hydroxymuconic semialdehyde hydrolase;\nHMSH;\nHOD hydrolase;\nxylF (gene name);\n2-hydroxymuconate-semialdehyde formylhydrolase;\n2-hydroxymuconate-semialdehyde hydrolase\n",
"root": null,
"color": null
}, {
"index": 6,
"keggreactionid": "R05865",
"source": "C00001",
"target": "C11354",
"hits": "15416-7_AHCVY7AFXX_S",
"enzymename": "2-hydroxymuconate-6-semialdehyde hydrolase;\n2-hydroxy-6-oxohepta-2,4-dienoate hydrolase;\n2-hydroxymuconic semialdehyde hydrolase;\nHMSH;\nHOD hydrolase;\nxylF (gene name);\n2-hydroxymuconate-semialdehyde formylhydrolase;\n2-hydroxymuconate-semialdehyde hydrolase\n",
"root": null,
"color": null
}, {
"index": 7,
"keggreactionid": "R05864",
"source": "C11354",
"target": "C06762",
"hits": "unbinned 15416-4_AHC",
"enzymename": "2-hydroxyhexa-2,4-dienoate hydratase;\ntesE (gene name);\nhsaE (gene name)\n",
"root": null,
"color": null
}, {
"index": 8,
"keggreactionid": "R05864",
"source": "C00001",
"target": "C06762",
"hits": "unbinned 15416-4_AHC",
"enzymename": "2-hydroxyhexa-2,4-dienoate hydratase;\ntesE (gene name);\nhsaE (gene name)\n",
"root": null,
"color": null
}, {
"index": 9,
"keggreactionid": "R00750",
"source": "C00084",
"target": "C03589",
"hits": "22316-6_AHCVY7AFXX_S",
"enzymename": "4-hydroxy-2-oxovalerate aldolase;\n4-hydroxy-2-ketovalerate aldolase;\nHOA;\nDmpG;\n4-hydroxy-2-oxovalerate pyruvate-lyase;\n4-hydroxy-2-oxopentanoate pyruvate-lyase;\nBphI;\n4-hydroxy-2-oxopentanoate pyruvate-lyase (acetaldehyde-forming)\n",
"root": null,
"color": null
}, {
"index": 10,
"keggreactionid": "R00750",
"source": "C00022",
"target": "C03589",
"hits": "22316-6_AHCVY7AFXX_S",
"enzymename": "4-hydroxy-2-oxovalerate aldolase;\n4-hydroxy-2-ketovalerate aldolase;\nHOA;\nDmpG;\n4-hydroxy-2-oxovalerate pyruvate-lyase;\n4-hydroxy-2-oxopentanoate pyruvate-lyase;\nBphI;\n4-hydroxy-2-oxopentanoate pyruvate-lyase (acetaldehyde-forming)\n",
"root": null,
"color": null
}],
"nodes": [{
"compoundid": "C04559",
"compoundname": "C04559",
"id": "C04559"
}, {
"compoundid": "C04112",
"compoundname": "C04112",
"id": "C04112"
}, {
"compoundid": "C06730",
"compoundname": "C06730",
"id": "C06730"
}, {
"compoundid": "C00007",
"compoundname": "C00007",
"id": "C00007"
}, {
"compoundid": "C06760",
"compoundname": "C06760",
"id": "C06760"
}, {
"compoundid": "C00001",
"compoundname": "C00001",
"id": "C00001"
}, {
"compoundid": "C00058",
"compoundname": "C00058",
"id": "C00058"
}, {
"compoundid": "C11354",
"compoundname": "C11354",
"id": "C11354"
}, {
"compoundid": "C06762",
"compoundname": "C06762",
"id": "C06762"
}, {
"compoundid": "C00084",
"compoundname": "C00084",
"id": "C00084"
}, {
"compoundid": "C00022",
"compoundname": "C00022",
"id": "C00022"
}, {
"compoundid": "C03589",
"compoundname": "C03589",
"id": "C03589"
}]
}
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var w = 500;
var h = 500;
var simulation = d3.forceSimulation(data['nodes'])
.force('link', d3.forceLink(data.edges))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(w / 2, h / 2));
var nodesgroup = svg.append("g")
.attr('class', 'nodes')
.selectAll('circle')
.data(data['nodes'])
.enter()
.append('circle')
.attr('r', 5);
//Create edges as lines
var edgesgroup = svg.append("g")
.attr('class', 'edges')
.selectAll("line")
.data(data['edges'])
.enter()
.append("line");
simulation.on("tick", function() {
edgesgroup
.attr("x1", function(d) {
return d.source.x;
})
.attr("y1", function(d) {
return d.source.y;
})
.attr('strokeyness', 5)
.attr("x2", function(d) {
return d.target.x;
})
.attr("y2", function(d) {
return d.target.y;
});
nodesgroup.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
});
});
console.log('script has run.');
我得到的错误是：
Uncaught Error: missing: C04559
答案 0 :(得分：2)
如果不是index，则需要指定id of your nodes。
所以你需要：
var simulation = d3.forceSimulation(data['nodes'])
.force('link', d3.forceLink(data.edges).id(function(n) {return n.id; }))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(w / 2, h / 2));