D3 v5 での CSV ファイルからのデータのロード

D3 v4 では、CSV ファイルからのデータのロードは XMLHttpRequest を使用して簡単に行うことができました。ただし、D3 v5 での Promises の導入により、プロセスが若干変更されました。

D3 v5 の使用

D3 v5 を使用して CSV ファイルからデータをロードするには、次のようにします。 fetch() API を利用できます。コードを変更する方法は次のとおりです:

d3.csv('data/dataset.csv')
    .then(function(data) {
        if (error !== null) {
            alert ("Couldn't load the dataset!");
        } else {
            //do something
        };
    })
    .catch(function(error) {
        //handle error
    })

違いを理解する

D3 v4 と D3 v5 の主な違いは、非同期リクエストの処理方法にあります。 D3 v4 は XmlHttpRequest を使用しますが、これは Promise を返しません。その結果、リクエストが完了すると実行されるコールバック関数を渡します。

対照的に、D3 v5 は Promise API を使用するため、成功ケースと失敗ケースを個別に処理できます。 「then()」関数は成功の場合の処理​​に使用され、「catch()」はエラーの処理に使用されます。

Example

次のコード スニペットは次のとおりです。 D3 v5 を使用して CSV ファイルからデータをロードする方法の完全な例:

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

Promise API を活用することで、D3 v5 は、D3 v4 と比較して、非同期データの読み込みを処理するためのより構造化された柔軟な方法を提供します。