D3 v5 での CSV データ読み込み用の D3 v4 コードの更新

D3 v4 では、CSV ファイルからのデータの読み込みは XMLHttpRequest を使用して行われました。メソッドが Promise を返しませんでした。ただし、D3 v5 では、フェッチ API が使用され、代わりに Promise が返されます。これには、Promise を処理するためにコードを変更する必要があります。

D3 v5 との互換性のために提供されたコードを更新するには:

d3.csv("data/dataset.csv")
  .then(function(data) {
    // Handle successful response
    // Do something with the data
  })
  .catch(function(error) {
    // Handle error
    alert("Couldn't load the dataset!");
  });

D3 v4 では、コードは次のようになります:

d3.csv("data/dataset.csv", function(data) {
  // Handle response
  // Do something with the data
});

主な違いは、d3.csv 関数によって返された Promise を処理するために .then() メソッドと .catch() メソッドを使用することです。

なぜ変更?

D3 v5 は Promises を使用して非同期操作を処理します。これにより、非同期コードを処理するためのより現代的で標準化された方法が提供されます。 Promise により、D3 v4 の以前のコールバックベースのアプローチと比較して、よりクリーンなコードと改善されたエラー処理が可能になります。