5,240viewsこんにちは、CTOの奥田です。データの可視化にはラインチャートだけでなく様々なチャートがあります。前回はD3.jsを使ってラインチャートを描画してみました。今回はD3.jsを使ってバーチャートを描画してみたいと思います。contentsチャートの軸を描画するバーを描画するアニメーションさせるツールチップを表示するデータを切り替えるさいごにチャートの軸を描画する前回と同様にチャートの軸を表示します。今回はバーの数でtick数が固定になってしまうのでフォーマットを変えることでレスポンシブにも対応できるようにします。d3.timeFormat("%Y/%m");tickFormatのコールバックで目盛りごとにフォーマットを指定できるのでスマホ時も1つ目の目盛りのみ年号を付与します。chartを作成します。矩形はrectで描画します。data()にデータを渡し、enter()を呼び出すことで描画できます。"#0061e0")}xScale.bandwidth()でグラフの最大幅を値の数で割った値が取得できます。そのままでもいいのですがグラフがバーで埋め尽くされてしまうのでバーに間隔をもたせます。xの値はxScale(d.date)で取れるのですが、xScale.bandwidth()の左端の値なのでバーの幅の半分を足してあげることでバーの真ん中をx軸の目盛りの真ん中に表示することができます。heightは開始位置の値からそれぞれの値を引くことで指定できます。})}DEMOをみるアニメーションさせるアニメーションをさせる方法はtransitionを使えば容易なのですが、バーチャートの場合ただ高さをアニメーションさせるだけでは基準がグラフの上になっているので上から下にアニメーションしてしまいます。y軸の0からアニメーションさせるにはheightをアニメーションさせつつ、translateYを開始位置から終了位置までアニメーションさせる必要があります。})}DEMOをみるツールチップを表示するツールチップはどちらのバーの上にマウスが乗っても上部へ出るように実装します。dにマウスが乗っている要素のデータが入るので値を指定し、ツールチップを表示したい場所に移動させます。.style('opacity',0);}DEMOをみるデータを切り替える今回はボタンをクリックするたびにデータがランダムな値に変わるようなサンプルを作成してみました。}}ボタンのクリックイベントにバインドします。self.animate();});初期表示時は0からのアニメーションですが、切替時はバーのアニメーションを初期表示時と切り替える必要があります。data()にてデータを再度セットし、heightとyを移動することでアニメーションさせることができます。chartを描画してみました。ラインチャートでは値の推移などを見やすく可視化できますがバーチャートは数値の差をよりわかりやすく表現できると思います。皆様の参考になれば幸いです。menuWorksBlogInformation。