こちらのデモを参考にグラフの辺の追加をアニメーションしたいと考えております。
辺のない状態のグラフは表示することが出来ました(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>
あなたの回答
tips
プレビュー