###d3.jsでファイル以外からデータの読み込をしたい
以下のURLを参考にd3.jsを用いてネットワーク図の描画を試していました.
D3.js Force-Directed Graph
ただ、Chromeなどの外部ファイルを参照するのに設定が必要なブラウザがあるのでメモリ上のJSONデータを読み込んで可視化する機構を作りたいです.
###試したこと
d3.json()メソッドにJSONデータを格納した変数をぶち込んでみましたが実ファイル用みたいで描画できませんでした.
###補足情報
・ブラウザ
Chrome v61.0.3163.100
・D3
d3.js v4.11.0
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
d3.jsonを使わず以下のようにすれば、参考としてあげられているページのグラフは表示されましたが、
こういうことではないのでしょうか?
javascript
1var graph = { 2 "nodes": [ 3 {"id": "Myriel", "group": 1}, 4 {"id": "Napoleon", "group": 1}, 5 (略) 6 {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1}, 7 {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1} 8 ] 9}; 10 11var svg = d3.select("svg"), 12 width = +svg.attr("width"), 13 height = +svg.attr("height"); 14 15var color = d3.scaleOrdinal(d3.schemeCategory20); 16 17var simulation = d3.forceSimulation() 18 .force("link", d3.forceLink().id(function(d) { return d.id; })) 19 .force("charge", d3.forceManyBody()) 20 .force("center", d3.forceCenter(width / 2, height / 2)); 21 22//d3.json("miserables.json", function(error, graph) { 23// if (error) throw error; 24 25 var link = svg.append("g") 26 .attr("class", "links") 27 .selectAll("line") 28 .data(graph.links) 29 .enter().append("line") 30 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); 31 32 var node = svg.append("g") 33 .attr("class", "nodes") 34 .selectAll("circle") 35 .data(graph.nodes) 36 .enter().append("circle") 37 .attr("r", 5) 38 .attr("fill", function(d) { return color(d.group); }) 39 .call(d3.drag() 40 .on("start", dragstarted) 41 .on("drag", dragged) 42 .on("end", dragended)); 43 44 node.append("title") 45 .text(function(d) { return d.id; }); 46 47 simulation 48 .nodes(graph.nodes) 49 .on("tick", ticked); 50 51 simulation.force("link") 52 .links(graph.links); 53 54 function ticked() { 55 link 56 .attr("x1", function(d) { return d.source.x; }) 57 .attr("y1", function(d) { return d.source.y; }) 58 .attr("x2", function(d) { return d.target.x; }) 59 .attr("y2", function(d) { return d.target.y; }); 60 61 node 62 .attr("cx", function(d) { return d.x; }) 63 .attr("cy", function(d) { return d.y; }); 64 } 65//}); 66 67function dragstarted(d) { 68 if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 69 d.fx = d.x; 70 d.fy = d.y; 71} 72 73function dragged(d) { 74 d.fx = d3.event.x; 75 d.fy = d3.event.y; 76} 77 78function dragended(d) { 79 if (!d3.event.active) simulation.alphaTarget(0); 80 d.fx = null; 81 d.fy = null; 82}
投稿2017/11/02 02:53
退会済みユーザー
総合スコア0
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/02 03:34