[Sy] D3.js 4.x系を使って座標軸を作成するサンプル（scaleLinear利用）

2018/02/15

前回 D3.js を使って文字を表示してみました。今回は、 scaleLinear というスケールを使って簡単な座標軸を一つ作ってみます。

前回の記事はこちらです。この続きを想定した説明になります。

⇒ [Sy] yarn で D3.js をインストールして svg で「Hello D3.js」と表示する

1. HTMLファイル作成

axis-scale-linear.html という HTMLファイルを新しく作成します。

(axis-scale-linear.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>座標軸（scaleLinear）</title>
</head>
<body>
  <svg width="300" height="100"></svg>

  <script src="/node_modules/d3/build/d3.min.js"></script>
  <script src="/js/axis-scale-linear.js"></script>
</body>
</html>

svg要素を一つ作っておき、/js/axis-scale-linear.jsを読み込むようにしておきます。

2. JavaScriptファイル作成

先ほど HTMLファイル内で読み込むようにしておいた /js/axis-scale-linear.js を以下のような内容で作成します。

(/js/axis-scale-linear.js)

// scale を作成（0〜5の値を0〜250pxに対応させる）
const scale = d3.scaleLinear()
                .domain([0, 5])
                .range([0, 250]);


// scale をセットして下側用の座標軸を作成
const axis = d3.axisBottom(scale);


// svg要素にg要素を追加し、g要素に座標軸を構築
d3.select('svg')
  .append('g')
  .attr('transform', 'translate(30, 30)')
  .call(axis);

ここで scale, domain, range, axis という言葉を使っていますが、それぞれこんなイメージで考えれば良いかと。

scale : 定規みたいなもの、または目盛り
domain : 実際の値の範囲
range : 画面上の px の範囲
axis : 座標軸

作成するファイルは以上です。では動作確認してみましょう。

動作確認

http-server を起動して、http://localhost:8080/axis-scale-linear.html にアクセスします。

↓ http-server についてはこちら。

⇒ [Sy] npm でインストールできる簡易的な Webサーバ「http-server」が手軽で便利

ブラウザには、このような座標軸が描画されます。

svg要素を確認すると、g要素が追加され、その中にたくさんの要素によって座標軸とラベルのための要素が作成されていることがわかります。

これらの要素をたった数行のコードで直感的に作成できるのは便利ですね。