fnwiya's quine

自分自身を出力するブログ

d3.jsの散布図でアニメーションをいれる

d3.jsでアニメーションを使うときは

  • アニメーション前の状態
  • アニメーション後の状態

をそれぞれ分けてかき、アニメーション後の状態に移る部分で
その動きをeaseなどを使って表現します。

使えるアニメーションはこのあたりをみると参考になると思います。

D3.js Easing Checker

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