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不再将输入节点合并到更新选择中;使用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以获取有效工作示例。

D3.js条形图没有正确动画，并在动画后留下了文物

1 个答案: