D3.js v5.0.0 プレリリース まとめ

2018-02-02

　はじめに

2018/1/29にD3.js v5.0.0がプレリリースされました。今回はv4のような大幅な名前空間の更新はなく、ほとんどのプログラムがそのまま使えそうです。カラースケールやコンターは本体と別モジュールとしてリリースされていましたが、本体に組み込まれたという形です。公式リリースノートでは下記の発表がありました。

  • Remove d3-request; add d3-fetch.
  • Remove d3-queue;
  • Add d3-scale-chromatic.
  • Add d3-contour.
  • Add selection.clone.
  • Add d3.create.
  • Add projection.angle.
  • Remove d3.schemeCategory20* categorical color schemes.
  • Fix duplicate installation of D3 modules at different versions. (#3256)
  • Fix d3.format’s SI format for locales with currency suffixes.

v4と同様にHeaderに

として呼び出して使います。

早速、バージョンアップ内容を順番に見ていきたいと思います。

（変更）d3-request → [d3-fetch]

Web上のデータを取得するd3-fetchが追加されました。APIは下記の種類があり、リクエスト先のURLを指定して使います。

  • d3.blob
  • d3.buffer
  • d3.csv
  • d3.dsv
  • d3.html
  • d3.image
  • d3.json
  • d3.text
  • d3.tsv

これに伴いd3-requestは廃止されました。今回の変更で一番影響が大きい部分です。

（廃止）遅延、非同期タスク [d3-queue]

遅延、非同期タスクを処理するd3-queueが廃止されます。

（追加）カラースケール [d3-scale-chromatic]

2タイプのカラースケールが追加されました。

d3.schemeCategory10[k]
のようにインデックスで指定するタイプと

d3.interpolateSpectral(t)
のように、0.0～1.0の小数点で指定するタイプです。

上のタイプはカテゴリ分けに、下のタイプはデータ分析の結果表示に使えそうです。カラーテーマも複数用意されており、色を選ぶ手間が省けます。これに伴い、v4のカラースケールで用いられてきたd3.schemeCategory20が廃止されます。D3.js v5 カラーテーマの詳細はこちらを参照下さい

（追加）コンター表示 [d3-contour]

コンター表示するためのAPIが組み込まれました。

詳細はこちら。
上のカラースケールと併用すれば、科学計算やビックデータの解析結果などいろいろな表示ができそうです。今回の注目機能です。

（追加） セレクションのディープコピー [selection.clone]

D3で選択(selection)した要素をディープコピーします。HTML上にコピー元の子要素を含んだ要素が生成されます。

（追加） 要素の生成 [d3.create]

d3.create('div')などとし、ドキュメントと分離した要素を生成します。

（追加） 投影図用メソッド [projection.angle]

投影図の設定時に、平面回転角を指定して回転させることが可能になります。

（廃止）v4用カラースケールテーマ　[d3.schemeCategory20]

v5用のカラースケールの追加に伴い、v4のカラースケールテーマが廃止されます。リリースノートによるとインデックスに対する相対的な明度を勘違いする可能性があるため20色スケールを廃止するとのことです。

（修正）異なるバージョンのD3モジュールの重複

異なるバージョンをインストールした際の重複モジュールの取り扱いを修正。ブラウザハンドルのサイズが大きくなるのを抑制。

https://github.com/d3/d3/issues/3256

（修正）通貨の表示($など)  [d3.format]

通貨用のフォーマット、接頭辞($など)の修正です。

 

以上です。

ホームページ(D3.js v4/5 使い方徹底攻略)はこちら。

D3.jsD3.js, D3.js v5