移行後に古いバーがまだ表示されているのはなぜですか？

Question

私は5つのバーを持つD3 barchartを持っています。私はそれを更新するとき、私はそれが正しい3つのバーに移行して見ることができますが、元のバーのいくつかは目に見えるままです - どのように私はそれらを終了させるのですか？ダークブルーのバーが正しい

：これはのように見える終わるものです

：

これは、最初に次のようになります。

Answer 1

「rect」オブジェクトを更新する現在のコードは、3つの新しいバーしかないため、データの要素数が変更されています。 update patternを使用する必要があります。

var rects = plot.selectAll("rect") 
    .data(currentDatasetBarChart); 

    rects.enter() 
    .append("rect") 
    //Code to style and define new rectangles. 

    //Update 
    rects.update() 
    .transition() 
    .duration(750) 
    .attr("x", function (d, i) { 
    return xScale(i); 
    }) 
    .attr("width", width/currentDatasetBarChart.length - barPadding) 
    .attr("y", function (d) { 
    return yScale(+d.measure); 
    }) 
    .attr("height", function (d) { 
    return height - yScale(+d.measure); 
    }) 
    .attr("fill", colorChosen); 

    // Remove unused rects 
    rects.exit().remove();