javascript - D3.js 条形图动画不正确并在动画后留下伪像

Question

我在 D3.js 中创建了一个简单的条形图，其中有两个条形图可供开始，并且您可以向条形图添加新的条形图。新栏的动画是从右侧滑入，然后放置在其位置。条形的大小也会更新，以便通过图形可能的最高 y 值进行标准化，该值在添加新条形时更新。这本身不起作用，只有图表上的两个条形图本身才能正确滑动。此外，每当图表上的当前条形图更新并缩小以标准化为新的最高 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 开始...

selection.append no longer merges entering nodes into the update selection; use selection.merge

这就是rect的原因您可以使用输入选择 bars.enter() 进行追加不会添加到更新选择 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一个工作示例。