D3.js v4/v5 棒グラフを並び替える方法

2018-03-09

棒グラフをアニメーションとともに並び替える方法を紹介します。

サンプルデモ – 横軸のメモリをクリックorタッチしてください

サンプルプログラム

解説

基本的な棒グラフの作り方はこちらを参照してください。
並び替えイベントに関連する部分を解説します。

1. 並べ替え用スケール設定

まず、通常の軸用のスケールを設定します。

.rangeRoundで軸の画面上の表示範囲を、domainで軸ラベル用の配列を設定します。dataset.map()でdatasetからnameを配列として取り出して設定します。

次に、データセットを並び替えます。

.sort()はjavascriptオブジェクトの標準メソッドで、引数に指定した関数の返り値が0より大きければb,aの順に、0より小さければa,bの順に、0の場合は並び替えないものです。今回は大きい順に並び替えたいので上の設定にしています。ちなみに対象が数値の場合は、

としてもよいです。
次に、並び替えた後のdatasetに対して軸用のスケールを設定します。

イベントによって、xScale1とXScale2を切り替えます。
最初の表示用に軸を最初の配列の並びどおり、名前順に並び替えておきます。

2. クリック時のイベント設定

切り替え用にフラグを設定します。

今回は横軸をクリック(タップ)した際に並び変わるようにイベントを設定します。
まず、軸を設定します。

並び変えの際にd3.selectAllで軸要素を選択するため、”class”属性を設定しておきます。また、クリックできることが分かるようにマウスカーソルを合わせたときにポインターが変わるようにします。

.call(axisx)で軸のSVG要素を一括で設定していますが、一括設定した軸のラベル要素は”tick”がクラスとして設定されています。バーとともに軸のラベルも移動させるためにデータを割り当てておきます。

onメソッドを使ってクリック時のイベント関数を登録します。

flgの値によって、xScale1とxScale2を切り替えます。棒グラフのバーは”x”属性を、軸ラベルは”transform”属性を使って横方向の位置を設定します。.transition().duration(500)は500ミリ秒かけて設定する属性に切り替えるアニメーションを設定するものです。

まとめ

transitionがうまく使えるとインタラクティブ性が向上するかと思います。また、棒グラフの基本的な使い方はこちらを参照ください。