0
私が作成しようとしている力のシミュレーションには、ノード間にエッジがあります。 d3がすべての位置をシミュレートするためには、それらのエッジには.sourceと.targetが必要です。私は、それらのソースとターゲットを、文字列を使って指定しました。ほとんどのチュートリアルでは、ノードのリストにあるその項目のインデックスを参照しています。D3jsがデータ内にあってもノードを見つけることができません
これはマイク・ボストック自身がここで説明されて動作する方法： https://bl.ocks.org/mbostock/533daf20348023dfdd76
しかし、あなたがエッジで最初のエッジをリンクしようとしたとき、それはすでに失敗した私のjsfiddleを見ればD3は、ノードを見つけることができません-リスト。私は間違って何をしていますか？すべての考えが高く評価されました！私は、マッピングがd3jのシーンの背後で起こるので、これを自分自身でどのようにデバッグするのか本当に分かりません。最小の例のようなものに
リンク： 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