チケットの見える化にチャレンジしてみる(3-2:　準備編 D3.jsの導入(2:アニメーション))

あけましておめでとうございます！（もう１月も半ばですが汗）株式会社スマレジ、開発部のmasaです。

皆様は年末年始はいかがでしたか？ masaは毎年の通り、実家に帰り親に顔を見せたくらいで、特にこれといったイベントはありませんでした汗。

このブログ関連で言えば、おやすみの間に外部会員連携とプラットフォームアプリを組み合わせて、会員販売だけでなくポイント付与もスプレッドシートでできるようにする拡張を試したので、まとまったら記事としてご紹介します笑。

では、今回はD3.jsのアニメーションのお話です。

前回作った棒グラフをアニメーションさせてみる。

前回のコードをベースに、棒グラフがニョキッと生えるアニメーションを試してみます。

サンプル

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3.jsの練習</title>
</head>
<body>
<div id="text-area"></div>
<div id="chart-area"></div>

<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript">


    /**
     * divで棒グラフを作る。（bindデータのvalidationは単純化のため割愛しています）
     * @param data bindする配列データ
     */
    function drawBarChart(data) {
        const div = d3.create("div")
            .style("font", "10px sans-serif")
            .style("text-align", "right")
            .style("color", "white");
        div.selectAll("div")
            .data(data)
            .join("div")
            .attr("class", "bar")
            .style("background", "steelblue")
            .style("padding", "0px")
            .style("margin", "1px")
            .style("width", "0px");
        document.getElementById("chart-area").appendChild(div.node());
    }

    /**
     * 棒グラフをアニメーションさせる。
     */
    function animateBarChart() {
        const transitionStyle = d3.transition()
            .duration(500)
            .ease(d3.easePoly);
        d3.selectAll(".bar")
            .transition(transitionStyle)
            .style("width", d => `${d * 10}px`)
            .text(d => d)
    }

    let bindArray = [10,3,6,8,22,15,1];
    drawBarChart(bindArray);
    animateBarChart();
</script>
</body>
</html>

drawBarChartの変更点

text表示を無くしました。（アニメーション時に表示したいので）
widthにbindしたデータを参照せず、0で固定にしました。
class指定を追加しました。(.bar)

上記の変更を加えることで、ブラウザ上は棒グラフは表示されませんが、棒グラフ用のdiv DOMには引数で与えられたdataがbindされている状態になります。

animateBarChartについて

前回のコードから追加されたのが、このanimateBarChartです。要は上述のdrawBarChartで設定していないwidthを設定して、配列の長さを表示してあげればOKなわけです。ただ、それだけだと「どのようにアニメーションさせるか」の情報がないですよね。その部分に当たるのが↓の部分。

        const transitionStyle = d3.transition()
            .duration(500)
            .ease(d3.easePoly);

durationがアニメーションさせる長さ(ms指定）でeaseがアニメーションの方式です。アニメーション方式については、d3クラス内のメンバ定数でその方式を指定できます。(d3.easePolyはニョキッと二次関数的な緩急をつけて生えてくる）

で、このtransitionStyleと合わせて、下記のように遷移後のデータをbindします。

        d3.selectAll(".bar") // drawBarChartで付与したクラス
            .transition(transitionStyle)
            .style("width", d => `${d * 10}px`)
            .text(d => d)

最後の二行については、前回のブログのdrawBarChartで記載されていたもの、そのままですね。（前回のブログは↓）

masa2019.hatenablog.com

次回は今はdiv領域を使用した表示をしていましたが、今度はSVGを利用して描画してみます。（申し訳ないです。今回盛り込む予定だったんですが、アニメーションの説明を先にした方が分かりやすくなりそうだったので、構成を変更しました汗）