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>

ここで、リクエスト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ページ「requestsl」を作成します。

<!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

リクエストAPIメソッド

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

d3.request（url [、callback]）
request.header（name [、value]）
request.mimeType（[type]）
request.user（[値]）
request.password（[値]）
request.timeout（[timeout]）
request.get（[データ]）
request.post（[データ]）
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（[値]）

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

request.password（[値]）

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

request.timeout（[timeout]）

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

request.get（[データ]）

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

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

request.post（[データ]）

このメソッドは、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

Webページ「csvl」を作成し、それに次のスクリプトを追加します。

<!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>

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

CSV

D3js-requests-api

目次