0

我在 d3.js 中完成了这个小面积图演示。

我能够为整个图表制作动画，但找不到一种方法来逐个制作动画（我希望它是一个适当的动画，而不是使用 svg-clip 的简单显示）。例如，为上面链接的页面中的圆圈设置动画的代码只是两行简单的行，为了清楚起见，我在此处将其分解：

// start frame
chart
    .selectAll( 'circle' )
    .data( data )
    .enter()
    .append( 'circle' )
    .attr( 'cx', function( d, i ) { return x( i ); })
    .attr( 'cy', y( 0 ) )
    .attr( 'class', 'point' ).attr( 'r', 5 );

// end frame
chart
    .selectAll( 'circle' )
    .data( data )
    .transition()
    .duration( 3000 )
    .attr( 'cx', function( d, i ) { return x( i ); })
    .attr( 'cy', function( d, i ) { return y( d ); });

这里的问题是所有的圈子都是同时开始和结束的。面积图的各个部分也是如此。那么如何一个接一个地移动它们呢？一种方法是使用d3的delay功能；我不确定如何对面积图的路径段执行此操作，但对于标记数据点的圆圈，它会是这样的：

// start frame
chart
    .selectAll( 'circle' )
    .data( data )
    .enter()
    .append( 'circle' )
    .attr( 'cx', function( d, i ) { return x( i ); })
    .attr( 'cy', y( 0 ) )
    .attr( 'class', 'point' ).attr( 'r', 5 );

// end frame
chart
    .selectAll( 'circle' )
    .data( data )
    .transition()
    .delay( 1000 * c )
    .duration( 3000 )
    .attr( 'cx', function( d, i ) { return x( i ); })
    .attr( 'cy', function( d, i ) { return y( d ); });

但要做到这一点，我需要c一个接一个地链接到各个圆圈的句柄，就像在一个循环中一样。

所以我的问题是：

  1. 我如何获得c选择的单个元素的句柄，用于圆圈和区域（svg.area（））图表？

  2. 有没有比我的delay方法更简单的方法来实现这一点？

4

1 回答 1

0

1)c可以通过将函数传递给 来获取您要查找的内容，这与您对任何调用delay()所做的方式完全相同（请参阅文档）：attr()

.delay( function(d, i) { return 1000 * i; } )// i is your "c"

2）使用delay()肯定似乎是正确的方法。

AFAIK，你仍然会在为路径做同样的事情时遇到困难。除了动画基础数据点本身之外，我想不出任何方法来做到这一点。

于 2012-11-15T20:22:24.227 回答