0

この小さな面グラフのデモをd3.jsで実行しています。

チャート全体をアニメーション化することはできますが、チャートを1つずつアニメーション化する方法が見つかりません（svg-clipを使用した単純な表示ではなく、適切なアニメーションにする必要があります）。たとえば、上記のリンク先のページの円をアニメーション化するコードは、わかりやすくするためにここで分割した2つの単純な行です。

// 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 ); });

ここでの問題は、すべての円が同時に開始および終了することです。面グラフのセグメントでも同じことが起こります。では、どうすればそれらを次々に移動できますか？1つの方法は、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()sureを使用することは、これに対する正しいアプローチのようです。

私の知る限り、パスに対して同じことを行うのはまだ難しいでしょう。基になるデータ ポイント自体をアニメーション化する以外に、これを行う方法を思いつくことはできません。

于 2012-11-15T20:22:24.227 に答える