質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1927閲覧

D3.jsで描画が更新されない

ruei

総合スコア284

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/09 23:45

編集2020/07/11 17:42

こちらのデモを参考にグラフの辺の追加をアニメーションしたいと考えております。
辺のない状態のグラフは表示することが出来ました(31行目から51行目)。
イメージ説明
実際の挙動です。
しかし、59行目から62行目にかけて行っている辺を追加した場合の再描画が行われません。Google Chrome Developer Tools (F12で起動)のコンソールを見ても、エラーが出ている様子はありません(link_setに辺を追加すれば、最初の描画では辺を表示することもできます)。

対処方法の分かる方いらっしゃいましたらご教示ください。

コードは公式サイトのサンプルから作りました。

<!DOCTYPE html> <meta charset="utf-8"> <!-- Load d3.js --> <script src="https://d3js.org/d3.v4.js"></script> <!-- Create a div where the graph will take place --> <div id="my_dataviz"></div> <script> node_set=[]; link_set=[]; for (i=0;i<10;++i) { node_set.push({name:i}); } var margin = {top: 10, right: 30, bottom: 30, left: 40}, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Initialize the links var link=svg.selectAll("line").data(link_set).enter().append("line").style("stroke", "#aaa") // Initialize the nodes var node=svg.selectAll("circle").data(node_set).enter().append("circle").attr("r", 20).style("fill", "#69b3a2") var simulation = d3.forceSimulation(node_set).force("link", d3.forceLink().id(d=>d.name)) .force("charge", d3.forceManyBody().strength(-100)) // This adds repulsion between nodes. Play with the -400 for the repulsion strength .force("center", d3.forceCenter(width / 2, height / 2)) // This force attracts nodes to the center of the svg area .on("end", ticked); // This function is run at each iteration of the force algorithm, updating the nodes position. function ticked() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("cx", function (d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } new_link_set=[]; for (i=0;i<5;++i) { new_link_set.push({source:i,target:(i+5)}); } new_link=svg.selectAll("line").data(new_link_set).enter().append("line").style("stroke", "#aaa") simulation.nodes(node_set) simulation.force("link").links(new_link) ticked(); </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問