0
我試圖做的力仿真在節點之間存在邊界。爲了讓d3模擬一切的位置，這些邊緣應該有一個.source和.target。我使用字符串指定了這些源和目標，而不是您在大多數教程中看到的節點列表中該項索引的方式。D3js即使在數據中也找不到節點
這部作品是由邁克·博斯托克自己這裏所描述的方法： https://bl.ocks.org/mbostock/533daf20348023dfdd76
但D3不能找到節點，如果你看我的jsfiddle試圖在第一邊緣中的邊緣連接時，它已經失敗-list。我究竟做錯了什麼？所有的想法都讚賞！我真的不知道如何自己調試，因爲映射發生在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