D3。リコール機能（ボタンなし）でデータを更新する方法

Question

私はforceCollideでバブルチャートを持っています。リコール機能（ボタンなし）を行うと、データの更新やサークルの半径の変更を試みています このコードは正しく動作します。しかし、私は新しいデータで関数を呼び出すと、私の古いサークルを再描画します。

私がしようとしている何

function DrawBubbleChart(data) { 
     var svg = d3.select("svg") 
      ... 
     var node = svg.selectAll(".circles") 
      ... 
     var simulation = d3.forceSimulation(data) 
      .force("x", ...) 
      .force("y", ...) 
      .force("collide", ...); 

     simulation.nodes(data) 
      .on("tick", ...); 

     d3.select("#btn").on("click",() => { 
      node.transition().duration(1000).attr("r", d => d.r); 
      simulation.nodes(data); 
      simulation.alpha(0.8).restart(); 
     }) 
    } 

：

function DrawBubbleChart(data) { 

    if(empty){ 
      var svg = d3.select("svg") 
       ... 
      var node = svg.selectAll(".circles") 
       ... 
      var simulation = d3.forceSimulation(data) 
       .force("x", ...) 
       .force("y", ...) 
       .force("collide", ...); 

      simulation.nodes(data) 
       .on("tick", ...); 
    } else { 
      //d3.select("#btn").on("click",() => { 
       node.transition().duration(1000).attr("r", d => d.r); 
       simulation.nodes(data); 
       simulation.alpha(0.8).restart(); 
      }) 
     } 

または類似した何かを。このための最良の方法（解決策）は何ですか？

Answer 1

とを描画する単一の関数を作成することは、単純な理由からバブルチャートを更新することをお勧めしません：チャートを更新するときは、以前の位置とサイズの泡。それらは、シミュレーションによって割り当てられた特性である：

• 索引 - ノードへのノードの0から始まるインデックス
• X - ノードの現在のx位置
• Y - ノードの現在のy位置
• VX - ノードの現在のx-速度
• VY - ノードの現在のy速度

そして、あなたのケースでは、追加の1、r。それは可能ですが、それは複雑です。

私のアドバイスは、最初にバブルを描画し、その関数内で新しいデータを処理する別の関数を作成する関数を作成することです。そうすれば、移行はスムーズです。

たとえば、以下のデモでは、気泡のデータを確認してrのプロパティを変更しています。バブルに結合されたデータを更新し、その位置を維持する同様の関数を作成することができます。ここで

はデモです：

var svg = d3.select("svg"); 
 

 
var colour = d3.scaleOrdinal(d3.schemeCategory10); 
 

 
var data = d3.range(30).map(d => ({ 
 
    r: 6 
 
})); 
 

 
var simulation = d3.forceSimulation(data) 
 
    .force("x", d3.forceX(150).strength(0.05)) 
 
    .force("y", d3.forceY(75).strength(0.05)) 
 
    .force("collide", d3.forceCollide(function(d) { 
 
     return d.r + 1; 
 
    })); 
 

 
var node = svg.selectAll(".circles") 
 
    .data(data) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("r", d => d.r) 
 
    .attr("fill", (d, i) => colour(i)); 
 

 
setInterval(()=>{ 
 
    d3.selectAll("circle").data().forEach(d => d.r = Math.random()*15); 
 
\t \t node.transition().duration(400).attr("r", d => d.r); 
 
    simulation.nodes(data); 
 
    simulation.alpha(0.8).restart(); 
 
}, 3000); 
 

 
simulation.nodes(data) 
 
    .on("tick", d => { 
 
     node.attr("cx", d => d.x).attr("cy", d => d.y); 
 
    });

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg></svg>