やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > プログラミング > D3.jsについて調べてみた

D3.jsについて調べてみた

プログラミング JavaScript

前回のつづき。

成果物

GitHubd3.HelloWorld.201702181437
GitHubd3.Timer.201702181507
GitHubd3.EnterExit.201702181507

Playgrounds

データ駆動なコード。

See the Pen d3.HelloWorld.201702181437 by ytyaru (@ytyaru) on CodePen.

jsfiddle,jsdo.it

d3のタイマー。

See the Pen d3.Timer.201702181507 by ytyaru (@ytyaru) on CodePen.

jsfiddle,jsdo.it

enter()とexit()でDOM更新。

See the Pen d3.EnterExit.201702181507 by ytyaru (@ytyaru) on CodePen.

jsfiddle,jsdo.it

開発環境

D3.js

D3.jsとはData-Driven Documentsの略。

データ駆動文書ライブラリ。JavaScriptの配列データをDOMに刺し込む。jQueryのセレクタに似ているが、配列データでループする処理を書かなくていい点がD3の強み。HTMLとSVGをDOM出力できる。

翻訳で読んで何となくわかったつもりになる。

データ駆動

D3.jsのページをみて、D3の要点を示した最小コードを書いてみた。

var ary = [1, 2, 3, 4, 5];
d3.select("body").selectAll("p")
  .data(ary)
  .enter()
  .append("p")
  .text(function(d) {return d});

HTMLのp要素を5つ作成する。

for文を書かなくても表現できるため可読性の高いコードになっている。C#でいうLINQやReactive Extensionsに似ている。メソッドチェーンで表現できるから読みやすい。これがD3.jsのウリ。

API Reference

API Reference参照。

データ駆動

関数 説明
data() 配列コレクションみたいなもの。d3.jsの肝。
enter() 新規追加する要素に対する処理をメソッドチェーンで実装する
exit() 削除する要素に対する処理をメソッドチェーンで実装する

こちらでデータ駆動系メソッドを一覧できる。

HTML/SVG操作

関数 説明
append() 要素の追加
remove() 要素の削除
attr() 属性の設定
text() テキスト要素の設定

こちらで編集系メソッドを一覧できる。

具体的なHTML要素やSVG要素はそれぞれの仕様を調べるべし。

他

まずはselectionsの項をみると基本を抑えることができそう。

項目 関数 概要
selecting-elements select(),selectAll(),… DOM要素の選択
joining-data data(),enter(),exit(),datum() データ駆動
modifying-elements append(),remove(),text(),attr(),sort(),… DOM要素の変更
handling-events on(),event(),mouse(),… イベント

他にも、数学、データ操作、パス、ポリゴンなど様々なAPIがある。多すぎて把握することすら難しそう。

アニメーションするためにはtimer()を使う。1/60秒で再描画するらしい。ただ、指定時間ごとに描画する方法がわからなかった。今回のコードでは標準APIのsetinterval()を使った。

所感

使いこなすにはかなり時間がかかりそう。