D3.js - API Permintaan

D3.js menyediakan API permintaan untuk melakukan XMLHttpRequest. Bab ini menjelaskan berbagai request API secara detail.

XMLHttpRequest

XMLHttpRequest adalah klien http bawaan untuk meniru objek XMLHttpRequest browser. Ini dapat digunakan dengan JS yang dirancang untuk browser untuk meningkatkan penggunaan kembali kode dan memungkinkan penggunaan pustaka yang ada.

Anda dapat menyertakan modul dalam proyek Anda dan menggunakannya sebagai objek XHR berbasis browser seperti yang dijelaskan di bawah ini.

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

Ini mendukung permintaan async dan sinkron dan melakukan permintaan GET, POST, PUT, dan DELETE.

Mengonfigurasi Permintaan

Anda dapat memuat langsung dari "d3js.org" menggunakan skrip di bawah ini.

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

Di sini, API permintaan memiliki dukungan bawaan untuk mengurai JSON, CSV, dan TSV. Anda dapat mengurai format tambahan dengan menggunakan permintaan atau teks secara langsung.

Muat File Teks

Untuk memuat file teks, gunakan sintaks berikut.

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

Mengurai file CSV

Untuk memuat dan mengurai file CSV, gunakan sintaks berikut.

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

Demikian pula, Anda juga dapat memuat file JSON dan TSV.

Contoh Kerja

Mari kita lihat contoh sederhana tentang cara memuat dan mengurai file CSV. Sebelum itu, Anda perlu membuat file CSV bernama "sample.csv" di folder aplikasi d3 Anda seperti yang ditunjukkan di bawah ini.

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

Sekarang, buat halaman web “requests.html” menggunakan script berikut.

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

Sekarang, minta browser dan Anda akan melihat respons berikut,

Meminta Metode API

Berikut adalah beberapa metode API Permintaan yang paling umum digunakan.

d3.request (url [, callback])
request.header (nama [, nilai])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (metode [, data])
request.abort()
d3.csv (url [[, baris], panggilan balik])

Sekarang mari kita bahas masing-masing secara singkat.

d3.request (url [, callback])

Ini mengembalikan permintaan baru untuk URL yang diberikan. Jika panggilan balik ditetapkan, itu dianggap sebagai permintaan panggilan jika permintaan belum dipanggil. Ini didefinisikan di bawah.

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

Anda dapat memposting beberapa parameter kueri menggunakan sintaks berikut.

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

Jika Anda ingin menentukan header permintaan atau jenis mime, Anda tidak boleh menentukan callback ke konstruktor.

request.header (nama [, nilai])

Ini digunakan untuk mengatur nilai ke header permintaan dengan nama yang ditentukan. Jika tidak ada nilai yang ditentukan, itu menghapus header permintaan dengan nama yang ditentukan. Ini didefinisikan di bawah.

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

Di sini, X-Requested-With header ke XMLHttpRequest adalah permintaan default.

request.mimeType ([type])

Ini digunakan untuk menetapkan jenis pantomim ke nilai yang diberikan. Ini didefinisikan di bawah.

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

request.user ([nilai])

Ini digunakan untuk menetapkan nama pengguna untuk otentikasi. Jika nama pengguna tidak ditentukan, defaultnya adalah null.

request.password ([nilai])

Jika ada nilai yang ditentukan, ini menetapkan kata sandi untuk otentikasi.

request.timeout ([timeout])

Jika waktu tunggu ditentukan, ini menyetel waktu tunggu ke jumlah milidetik yang ditentukan.

request.get ([data])

Metode ini digunakan untuk mengirim permintaan dengan metode GET. Ini didefinisikan di bawah.

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

request.post ([data])

Metode ini digunakan untuk mengirim permintaan dengan metode POST. Ini didefinisikan di bawah.

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

request.send (metode [, data])

Metode ini digunakan untuk mengirim permintaan menggunakan metode GET atau POST yang diberikan.

request.abort ()

Metode ini digunakan untuk membatalkan permintaan.

d3.csv (url [[, baris], panggilan balik])

Menampilkan permintaan baru untuk file CSV di URL yang ditentukan dengan teks jenis Mime default / csv. Sintaks berikut ditampilkan tanpa callback.

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

Jika Anda menentukan panggilan balik dengan metode POST, itu didefinisikan di bawah ini.

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

Contoh

Buat file csv bernama "lang.csv" di direktori folder root aplikasi d3 Anda dan tambahkan perubahan berikut ke dalamnya.

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

Buat halaman web "csv.html" dan tambahkan script berikut ke dalamnya.

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

Sekarang, minta browser dan kita akan melihat respons berikut.