GUNMA GIS GEEK

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

D3v4/v5

【D3.js】チャートの軸と目盛りをカスタマイズする5の方法

投稿日:

シンプルでスタティック(静的)なチャートであっても、細かく要件が発生しがちなのが軸(axis)と目盛り(ticks)です。

ここではD3を使って軸や目盛りを描画する際に使えるテクニックを紹介します。

それぞれ気持ち程度の解説を入れていますが、詳しくはexampleリンク先のサンプルコードを参照してください。

レスポンシブ

一番要望が多いというか、最近では基本的な要件になりつつある軸を含めたレスポンシブ対応です。
ここでは、単にリサイズするだけでなく、横幅が特定のブレイクポイント以下になった場合に目盛りの表示数なども変更しています。

D3 Axis Tips#1 - Responsive

example

axisを出力するエレメントに対して、仮のデータをバインドすることでd3の差分管理機能をaxisに対しても使えるようにしています。

目盛りのカスタマイズ

例えば、「一番最初の目盛りにだけ単位をつけて表示したい」や「1月の時だけ年月で表示したい」などの要件に対応する方法です。

D3 Axis Tips#2" - Custom Tick Label

example

tickFormatに渡すコールバックの中で、目盛りの表示方法を細かく指定することができます。

目盛りを内側に表示

表示領域の狭いスマートフォンでは、チャートのマージンを十分に取ることができない場合があります。
そういった場合は、目盛りを内側に表示することで余計なマージンを取らずにコンパクトなチャートを表示することができます。

D3 Axis Tips#3 - Inner Tick Label

example

axisLeft, axisRight, axisTop, axisBottomの各モジュールでラベルの表示位置を指定できます。

目盛りの改行

カテゴリのラベルなどで、どうしても改行が必要になる場合があります。
SVGには基本折り返すという機能がないため、非常に面倒ですが下記方法で一応実装することができます。

D3 Axis Tips#4" - Wrapping Tick Label

example

d3.axisが出力したエレメントからtext要素を一旦削除し、代わりにtspanで囲ったエレメントを追加しています。

SVGでの改行については、こちらのサンプルを参照してください。

基軸の移動

表示するデータに0以下の値が入ってくる場合、基軸を0の位置へ表示したいという要望がよくあります。ここではtransformを使って0ベースラインを移動しています。
以下の例では三秒ごとにデータが入れ替わり、それに伴ってベースラインが移動します。

D3 Axis Tips#5 - Move BaseLine

example

(おまけ)軸のクラスタリング

二つのチャートを並べて表示したい場合など。
ここでは、Y軸をトップとボトムに分けて表示しています。

Clustered Column Chart

example

素直に二つチャートを作って並べた方が早いかも。

About Me

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

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