Promise を使用して D3 v5 の CSV ファイルからデータをロードする方法?

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

D3 v4 では、XMLHttpRequest を使用して CSV ファイルからデータを簡単にロードできました。ただし、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()」はエラーの処理に使用されます。

例

次のコード スニペットは、次のコード スニペットを提供します。 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   
  })

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

以上がPromise を使用して D3 v5 の CSV ファイルからデータをロードする方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。