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

2018/02/14

svg を使って汎用的な可視化ができる D3.js を yarn でインストールして、svg で「Hello D3.js!」と表示するサンプルを動かすところまでの手順です。

1. D3.js をインストールする

作業ディレクトリを適当に作ります。

$ mkdir hello-d3
$ cd hello-d3

yarn を使って D3.js をインストールします。

$ yarn add d3
・
・
success Saved 35 new dependencies.
・
・
├─ d3@4.13.0
・
・
✨  Done in 2.60s.

依存関係のあるモジュールが結構ありますが、3秒かからずインストールできました。

2. index.html を作成

index.html を作成します。

$ vim index.html

内容はこんな感じにします。

(index.html);

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめての d3.js</title>
</head>
<body>
  <svg width="300" height="100"></svg>

  <script src="/node_modules/d3/build/d3.min.js"></script>
  <script src="/js/index.js"></script>
</body>
</html>

body要素に svg要素をひとつだけ作っておきます。ここに、後で D3.js を使って svg の text要素を配置していきます。

body要素の閉じタグの直前で、D3.js（d3.min.js）を読み込みます。

その後、実際に処理を書くための /js/index.js を読み込むようにしておきます。

3. /js/index.js を作成

次に処理を書くための JavaScript のファイルを用意します。

$ mkdir js/
$ vim js/index.js

内容はこちらです。

(js/index.js)

d3.select('svg')
  .append('text')
  .attr('x', 20)
  .attr('y', 20)
  .text('Hello D3.js!');

4. 動作確認

今回は http-server を使って簡易的な Webサーバを起動します。 http-server についてはこちらに書いてます。（index.html をブラウザで開くだけでも動きます）

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

http-server を起動して、

$ http-server

http://localhost:8080 にアクセスするとこのように表示されます。

Developer Tools で見てみると、svg要素に D3.js によって text要素が追加されていることが確認できます。