D3 v4 enter（）トランジションで最初の呼び出し時にキャンバスに円を描くことができない

Question

d3 v4を使用してblockを書き換えようとしたときに、drawWithDataが2度目に呼び出されるまでサークルが表示されない。 「追加」または「描画」をクリックすると、効果を確認できます。

強制オブジェクトをv4シミュレーションオブジェクトに変更する以外に、キャンバスの描画方法とDOMオブジェクトの遷移を同じにする必要があります。

jsfiddleをご覧になりたい方は

circles.transition() 
     .duration(500) 
     .attr('r', function(d){ 
      return d.r; 
     }); 

へ：

circles = container.selectAll('circle') 
        .data(data); 

// Insertion animation. 
newCircles = circles.enter() 
        .append('circle') 
        .attr("id", function(d, i){ return d.id; }) 
        .attr('r', 0) 
        .attr('alpha', 1) 
        ; 

circles.transition() 
     .duration(500) 
     .attr('r', function(d){ 
      return d.r; 
     }); 

// Deletion animation 
dyingCircles = circles.exit(); 
dyingCircles.transition() 
      .duration(200) 
      .attr('r', 0) 
      .attr('alpha', 0) 
      .remove(); 

simulation.on('tick', function() { 
    var renderStart = new Date(); 
    context.clearRect(0, 0, width, height); 
    context.fillStyle = "rgb(70, 130, 180)"; 
    context.beginPath(); 

    circles.each(function(d) { 
     context.moveTo(d.x, d.y); 
     var radius = d3.select(this).attr('r'); // because d.r contains the final value 
     context.arc(d.x, d.y, radius, 0, 2 * Math.PI); 
    }); 

    dyingCircles.each(function(d) { 
     context.moveTo(d.x, d.y); 
     var alpha = d3.select(this).attr('alpha'); 
     context.fillStyle = "rgb(70, 130, 180, "+alpha+")"; 
     var radius = d3.select(this).attr('r'); // because d.r contains the final value 
     context.arc(d.x, d.y, radius, 0, 2 * Math.PI); 
    }); 

    context.fill(); 

    time += (new Date() - renderStart); 
    ticks++; 
}); 

Answer 1

は私が変更：以下は、関数drawWithData（データ、シミュレーション）の内容である

newCircles.transition() 
     .duration(500) 
     .attr('r', function(d){ 
      return d.r; 
     }); 

とドローボタンは、最初のクリックで動作します。 dyingCirclesを遷移させるときは、次のように、newCirclesにも同じことを行います。