D3.js を使ってグラフを作る練習のために環境を準備します。
練習用のテンプレートを用意する
D3.js の学習には主に書籍『インタラクティブ・データビジュアライゼーション―D3.js によるデータの可視化』とオンライン講座『Mastering data visualization in D3.js』を参考にします。
D3.js は、公式のリリースから、現在最新の 5.9.2 の d3.zip をローカルにダウンロードして展開します。中にある d3.js または d3.min.js を利用します。min 版は空白を取り除いてファイルサイズを小さくしたバージョンです。
プログラムのフォルダー構造は、フォルダ直下の index.html ファイルから、js フォルダ内の d3.js と main.js を読み込ませるようにします。 main.js に javascript で行う処理を書いていきます。 svg を取り出して利用することを考えたいので、スタイル情報は外部 css を使わずに svg の中に持たせるようにします。
template/
index.html
js/
d3.js
d3.min.js
main.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3の練習テンプレート</title>
</head>
<body>
<! -- javascript ライブラリ -->
<script src="js/d3.js"></script>
<! -- カスタム javascript -->
<script src="js/main.js"></script>
</body>
</html>Node.js をインストールする
D3.js を使うとき、ローカルに保存した html ファイルを直接ブラウザで開いて問題なく動作することもありますが、 ブラウザがセキュリティーのためデータを CSV などの外部ファイルから読み込む処理ではエラーが出て実行できません。不具合を回避するためには web サーバーを介して html ファイルを表示させる必要があります。ローカルで web サーバーを動かすために、Node.js という javascript の環境を Windows にインストールします。Windows では、nodeist というツールを使って Node.js のバージョン管理をするのがよいようです。
nodist を使って Windows に Node.js を入れる
まず nodist のサイトから最新版のインストーラーをダウンロードして、指示にしたがいインストールします。インストールが完了したら、コマンドプロンプトを開きます。以下のコマンドで、nodist からインストールできる Node.js のバージョンの一覧が表示されます。
> nodist dist一覧の中から現在の推奨版の10.15.3をインストールします。
> nodist + 10.15.3インストールされている node.js のバージョンを確認します。上でインストールした推奨版と nodist をインストールしたときに同時にインストールされた最新版の二つのバージョンが確認でき、最新版の方が有効になっていました。
>nodist
(x64)
10.15.3
> 11.13.0 (global: 11.13.0)推奨版を有効化して、node.js のバージョンを確認します。
>nodist global 10.15.3
>node -v
v10.15.3ローカルで http サーバーを起動する
node.js と同時にインストールされるパッケージ管理ツール npm を使って、http-server をインストールします。
> npm install -g http-serverコマンドプロンプトで、テンプレートフォルダに移動します。
> cd テンプレートフォルダのパスhttp-server コマンドでサーバーを起動します。
> http-serverブラウザで http://localhost:8080/ を開くと、テンプレートの index.html が表示されます。デフォルトのポートは8080で、変更したいときは起動時に -p オプションでポートを指定します。サーバーの終了は、コマンドプロンプトで コントロール＋Cを押します。
