GUNMA GIS GEEK

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

*

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

     - D3v4

はてなブックマーク - 【D3.js】Axis(軸)を可変させる2種類の方法。
Pocket

d3.js ver.4 axis update example

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

サンプル1

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

サンプル2

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

example

はてなブックマーク - 【D3.js】Axis(軸)を可変させる2種類の方法。
Pocket

 - D3v4

  関連記事

駅すぱあと路線図API Hacks! D3.jsを使ってSVGをオーバーレイする。

新しい地図サービスが始まったとき、誰もが気になるのは「この地図サービスでD3.j …

d3.js logo
D3.js version.4を学ぶための学習リソースの紹介。

この記事は「D3.js Advent Calendar 2016」 参加記事です …

upload/download
【D3.js】チャートをSVGやPNGでダウンロードできるようにするまでの長い道のり

自分用のメモ書きですが、何かの参考になるかもしれないので掲載しておきます。 Up …

javascript Proxy Object
【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。

D3.jsを使ってデータビジュアライゼーションを作成するときにありがちな処理とし …

RESAS-APIを使ってみた。

RESAS(地域経済分析システム)に掲載しているデータをプログラムから取得できる …

D3.js ver.4 example
D3.js ver.4 始めました。

http://bl.ocks.org/shimizu D3.js のver.4を …