D3.js ver.5について。

2018年3月22日にD3.jsのver.5がリリースされました。

後方互換をぶった斬って捨てたver.3系からver.4系へのアップデートに比べると、今回のバージョンアップでver.4系と互換性のない変更点はわずかです。

なので、ぶっちゃけあんまり書くことがありません。

（つまらない）

変更点

とくにver.4系と互換性のない変更点について。

データの読み込み関数の仕様変更

d3.csvやd3.jsonなど、外部ファイルを読み込んでパースを行いオブジェクトへと変換してくれるD3の便利なデータ読み込み関数の仕様が変更されました。

ver.４では、読み込んだデータをコールバック関数で受け取っていましたが、ver.5では、Promisesを返すようになっています。

d3.csv("file.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

d3.csv("file.csv", function(error, data) {

if (error) throw error;

console.log(data);

});

d3.csv("file.csv").then(function(data) {
  console.log(data);
});

d3.csv("file.csv").then(function(data) {

console.log(data);

});

Promisesを返すようになったのでawaitを使って書くこともできます。

async function load() {
    const res = await d3.csv("file.csv");
    return res;
}

const dataset = load()

async function load() {

const res = await d3.csv("file.csv");

return res;

}

const dataset = load()

内部的にはXHR(XMLHttpRequest)を使っていたd3-requestモジュールが廃止され、代わりにFetch APIを使った d3-fetchモジュールに変更されています。

d3-queue が非推奨に

複数の外部ファイルを読み込むのに便利だった d3-queue が非推奨になりました。

「普通にPromise.all使うか、サードパーティのヘルパーライブラリを使うなりして」とのことです。

そんなわけで、d3-queueを使っていた方はお気をつけください。

その他

プラグインだった、d3-contourが標準になったり、カラースキームがColorBrewerベースになったりと小さな変更点はありますが、既存のver.4系コードに与える影響はほとんどないでしょう。

詳しくはchangelogを。

d3/CHANGES.md at master · d3/d3

このブログのカテゴリについて

D3v4カテゴリの名称を、D3v4/5カテゴリに変更しました。
一部のサンプルコード、外部ファイルの読み込みにコールバックを使っているコードがあるのでv5を使う場合は、そのあたりを注意していただけると助かります。
最終的には、v5に準拠したサンプルコードに変更する予定ですが、v3->v4への修正が終わっていないので、しばらく時間がかかると思います。

D3.js ver.5について。

変更点

データの読み込み関数の仕様変更

d3-queue が非推奨に

その他

このブログのカテゴリについて

投稿者: shimizu

“D3.js ver.5について。” への1件の返信