x軸に沿ったdc.jsアニメーション選択

Question

選択に沿ってスライドするdc.jsグラフを持っていたいと思います。ナスダックの例のhttps://dc-js.github.io/dc.js/では、時間のサブ選択を選択してから「アニメート」ボタンをクリックすると、選択フィルタがx軸に沿って所定のステップサイズでスライドします。

私はどこから始めるのか分からなくなってしまった。

Answer 1

ほとんどの場合、ユーザーの操作に基づいてではなく、タイマーに基づいて関連するグラフに現在のフィルタを設定する必要があります。

私はこれを説明するためにフィドルにナスダック例の関連部分をコピーした：https://jsfiddle.net/0zkbyyqu/9/

チャートが整っているならば、アニメーションがsetIntervalに基づいてフィルタを変更するだけです。あいまいな理由から、私たちはmoveChartのfocus方法、ないfilterメソッドを使用したいが、それは本質的範囲チャートの変更を反映するために、もう少しコードで、同じことをやっている：

var beginYear = 1985; 
window.setInterval(function() { 
    moveChart.focus([ 
    new Date(beginYear, 0,0,0,0,0,0), 
    new Date(beginYear+3, 0,0,0,0,0,0)]); 
    if(++beginYear > 2009) 
    beginYear = 1985; 
}, 1000); 

（ Initial Range selection in DC.js chart）は

私は、ユーザーからの範囲の最初の選択についてのあなたのアイデアをオフに残っている、とだけで行って：あなたはfilterメソッドを使用していた場合は、ここで説明するよう、あなたは、dc.filters.RangedFilterを構築する必要があると思います3年の範囲。この例では、読み込まれるとすぐにアニメーションが開始されます。 chart.filter()を使用して現在のフィルタをフェッチできます。結果は2つの日付の配列であるRangedFilterになります。うまくいけば、アニメーションにスタート/ストップボタンを追加する方法は明らかです。

物事のカップルは、このアプローチについてトリッキーです：あなたはまた、タイマーやストリーミングデータを持っている場合

1. それは遷移とチャートを使用してトリッキーです。この場合、transitionDurationを500msに減らして意味をなす必要がありましたが、原因と結果はまだ少し混乱しています。これについて何をすべきか分かりません。

2. エリアチャートtransitions are incorrectこれで奇妙なアーティファクトが発生します。