GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v4

【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

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。