D3.js棒グラフが正しくアニメーション化されず、アニメーションの後にアーティファクトが残っています

Question

D3.jsで始める2つの棒がある単純な棒グラフを作成しました。棒グラフ。新しいバーのアニメーションは右からスライドさせて、その位置に配置します。バーのサイズはまた、新しいバーが追加されたときに更新されるグラフに対して可能な最も高いy値によって正規化されるように更新される。これ自体は機能せず、グラフ自体にある2つの棒だけが正しくスライドします。また、グラフ上の現在の棒が更新され、新しい最高y値に正規化されるように縮小すると、アニメーションが「残っている」ように見えます。現在の位置。説明に役立つイメージを添付しました。 私はここでもjsfiddleを通して複製できましたjsFiddle。ここに新しいバーが追加され、アニメーションのためのコードもある：

$('button#add').on('click', function(e) { 

    var datum = Math.round (d3.max(data) + 200); 

    data.push(datum); 

    xScale.domain(d3.range(data.length)); 

    var yMax = d3.max(data); 

    yScale.domain([ 0, yMax ]); 

    var bars = svg.selectAll('rect') 
       .data(data); 

    bars.enter() 
     .append('rect') 
     .attr('x', function(d, i) { 
      return width; 
     }) 
     .attr('y', function(d, i) { 
      return yScale(d); 
     }) 
     .attr('width', xScale.bandwidth()) 
     .attr('height', function(d, i) { 
      return height - yScale(d); 
     }) 
     .attr('fill', function(d, i) { 
      return colors[ i ]; 
     }); 

    bars.transition() 
     .duration(1500) 
     .attr('x', function(d, i) { 
      return xScale(i); 
     }) 
     .attr('y' , function(d, i) { 
      return yScale(d); 
     }) 
     .attr('width', xScale.bandwidth()) 
     .attr('height', function(d, i) { 
      return height - yScale(d); 
     }) 
     .attr('fill', function(d, i) { 
      return colors[ i ]; 
     }); 

    }); 

私はそれはおそらく、アニメーションによって引き起こされると仮定し、私が間違ってそこに何かをすることができるならば、しかし、わからないどのようにかなぜ。どんな助けでも大歓迎です。

ありがとうございます！

Answer 1

これを実行するには、D3 v4＆hellipの時点で注意する必要があります。

selection.appendは、入力ノードを更新選択にマージしなくなりました。これはrect sのあなたが入力した選択bars.enter()を使用して追加した理由ですselection.merge

を使用する更新の選択barsに追加されません。あなたが一つに両方の選択をマージする.merge()を呼び出すことができる生活を容易にする：

var barsEnter = bars.enter()   // Save the enter selection 
    .append('rect') 
// ... 

bars.merge(barsEnter).transition() // Merge into update selection to act on all rects 
    .duration(1500) 

は、実施例のための更新JSFiddleを見てください。