d3.jsの散布図でアニメーションをいれる
d3.jsでアニメーションを使うときは
- アニメーション前の状態
- アニメーション後の状態
をそれぞれ分けてかき、アニメーション後の状態に移る部分で
その動きをeaseなどを使って表現します。
使えるアニメーションはこのあたりをみると参考になると思います。
d3/d3-ease - JavaScript - GitHub
D3.js で連続 transition アニメーション - 雑食性雑感雑記
以下のScriptだと散布図に上から点が落ちてきてboundするアニメーションになります。
// 描画(アニメーション前) svg.selectAll('circle') .attr({ 'cx' : function(d) { return xScale(d.votedRights); }, 'cy' : function(d) { return 0; }, 'r' : function(d) { return 0; }, 'fill' : function(d) { return"gray"; } }); // 描画(アニメーション後) svg.selectAll('circle') .transition() .duration(2000) .delay(function(d, i){ return yScale(d.aveAge); }) .ease("bounce") .attr({ 'cx' : function(d) { return xScale(d.votedRights); }, 'cy' : function(d) { return yScale(d.aveAge); }, 'r' : function(d) { return r; }, 'fill' : function(d) { return 'rgba(' + Math.floor(Math.random() * 256) + ', ' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ', 0.6)'; } });