d3.js ver.4 axis update example

【D3.js】Axis(軸)を可変させる2種類の方法。

d3.js ver.4 axis update example

D3で作成した軸の値を変更してアップデートする方法です。
基本的には、スケールのドメインを変更してAxisオブジェクトに渡してアップデートするだけです。

サンプル1

axis要素を追加する初期化処理と、アップデート処理を分離したオーソドックスな方法。 initAxisの前にupdateAxisが実行されると当然ながらエラーになる。 Axisを複数表示しなくてはならないケースなどでは、init/updateのセットを複数管理しなくてはならないため複雑化しやすい。

サンプル2

初期化とアップデートの処理をD3のデータドリブン機能を利用してまとめた例。 drawAxisは、Axisが存在しない場合は要素を追加してアップデート、すでに要素が存在している場合はアップデートのみを行うため、初期化とアップデートを個別に考えなくてよい。

example