D3.js-リクエストAPI

D3.jsは、XMLHttpRequestを実行するためのリクエストAPIを提供します。この章では、さまざまなリクエストAPIについて詳しく説明します。

XMLHttpRequest

XMLHttpRequestは、ブラウザーのXMLHttpRequestオブジェクトをエミュレートするための組み込みのhttpクライアントです。ブラウザ用に設計されたJSで使用して、コードの再利用を改善し、既存のライブラリを使用できるようにします。

以下で説明するように、モジュールをプロジェクトに含めて、ブラウザーベースのXHRオブジェクトとして使用できます。

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();

非同期リクエストと同期リクエストの両方をサポートし、GET、POST、PUT、およびDELETEリクエストを実行します。

リクエストの設定

以下のスクリプトを使用して、「d3js.org」から直接ロードできます。

<script src = "https://d3js.org/d3-request.v1.min.js"></script>
<script>
   d3.json("/path/to/sample.json", callback);
</script>

ここで、requests APIには、JSON、CSV、およびTSVの解析のサポートが組み込まれています。リクエストまたはテキストを直接使用して、追加のフォーマットを解析できます。

テキストファイルをロードする

テキストファイルをロードするには、次の構文を使用します。

d3.text("/path/to/sample.txt", function(error, text) {
   if (error) throw error;
   console.log(text); 
});

CSVファイルの解析

CSVファイルを読み込んで解析するには、次の構文を使用します。

d3.csv("/path/to/sample.csv", function(error, data) {
   if (error) throw error;
   console.log(data); 
});

同様に、JSONファイルとTSVファイルもロードできます。

実例

CSVファイルをロードして解析する方法の簡単な例を見てみましょう。その前に、以下に示すように、d3アプリケーションフォルダーに「sample.csv」という名前のCSVファイルを作成する必要があります。

Num1,Num2
1,2
3,4
5,6
7,8
9,10

次に、次のスクリプトを使用してWebページ「requests.html」を作成します。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js Requests API </h3>
      <script>
         d3.csv("sample.csv", function(data) {
            console.log(data); 
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。

APIメソッドをリクエストします

以下は、最も一般的に使用されるRequestsAPIメソッドの一部です。

d3.request（url [、callback]）
request.header（name [、value]）
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send（method [、data]）
request.abort()
d3.csv（url [[、row]、callback]）

ここで、これらのそれぞれについて簡単に説明しましょう。

d3.request（url [、callback]）

指定されたURLに対する新しいリクエストを返します。コールバックが割り当てられている場合、それは呼び出し要求と見なされます。それ以外の場合、要求はまだ呼び出されていません。以下に定義します。

d3.request(url)
   .get(callback);

次の構文を使用して、いくつかのクエリパラメータを投稿できます。

d3.request("/path/to/resource")
   .header("X-Requested-With", "XMLHttpRequest")
   .header("Content-Type", "application/x-www-form-urlencoded")
   .post("a = 2&b = 3", callback);

リクエストヘッダーまたはmimeタイプを指定する場合は、コンストラクターへのコールバックを指定しないでください。

request.header（name [、value]）

指定された名前のリクエストヘッダーに値を設定するために使用されます。値が指定されていない場合は、指定された名前のリクエストヘッダーが削除されます。以下に定義します。

d3.request(url)
   .header("Accept-Language", "en-US")
   .header("X-Requested-With", "XMLHttpRequest")
   .get(callback);

ここで、XMLHttpRequestへのX-Requested-Withヘッダーはデフォルトのリクエストです。

request.mimeType（[type]）

これは、mimeタイプを指定された値に割り当てるために使用されます。以下に定義します。

d3.request(url)
   .mimeType("text/csv")
   .get(callback);

request.user（[value]）

認証用のユーザー名を割り当てるために使用されます。ユーザー名が指定されていない場合、デフォルトでnullになります。

request.password（[value]）

値を指定すると、認証用のパスワードが設定されます。

request.timeout（[timeout]）

タイムアウトが指定されている場合、タイムアウトは指定されたミリ秒数に設定されます。

request.get（[data]）

このメソッドは、GETメソッドを使用してリクエストを送信するために使用されます。以下に定義します。

request.send("GET", data, callback);

request.post（[data]）

このメソッドは、POSTメソッドを使用して要求を送信するために使用されます。以下に定義します。

request.send("POST", data, callback);

request.send（method [、data]）

このメソッドは、指定されたGETまたはPOSTメソッドを使用してリクエストを送信するために使用されます。

request.abort（）

このメソッドは、リクエストを中止するために使用されます。

d3.csv（url [[、row]、callback]）

デフォルトのMimeタイプtext / csvを使用して指定されたURLにあるCSVファイルの新しいリクエストを返します。次の構文は、コールバックなしで表示されます。

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); });

POSTメソッドでコールバックを指定する場合、それは以下で定義されます。

d3.request(url)
   .mimeType("text/csv")
   .response(function(xhr) { return d3.csvParse(xhr.responseText, row); })
   .post(callback);

例

d3アプリケーションのルートフォルダディレクトリに「lang.csv」という名前のcsvファイルを作成し、それに次の変更を追加します。

Year,Language,Author
1972,C,Dennis Ritchie
1995,Java,James gosling
2011,D3 js,Mike Bostock

ウェブページ「csv.html」を作成し、それに次のスクリプトを追加します。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> D3.js request API</h3>
      <script>
         d3.csv("lang.csv", function(d) {
            return {
               year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
               language: d.Language,
               author: d.Author,
            };
         }, function(error, rows) {
            console.log(error);
            console.log(rows[0].year);
         });
      </script>
   </body>
</html>

ここで、ブラウザをリクエストすると、次の応答が表示されます。