D3.js - İstek API'si

D3.js, XMLHttpRequest'i gerçekleştirmek için bir istek API'si sağlar. Bu bölümde çeşitli API istekleri ayrıntılı olarak açıklanmaktadır.

XMLHttpRequest

XMLHttpRequest, tarayıcı XMLHttpRequest nesnesini taklit etmek için yerleşik http istemcisidir. Tarayıcıların kodun yeniden kullanımını iyileştirmesi ve mevcut kitaplıkların kullanımına izin vermesi için tasarlanmış JS ile kullanılabilir.

Modülü projenize dahil edebilir ve aşağıda açıklandığı gibi tarayıcı tabanlı XHR nesnesi olarak kullanabilirsiniz.

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

Hem eşzamansız hem de eşzamanlı istekleri destekler ve GET, POST, PUT ve DELETE isteklerini gerçekleştirir.

İstekleri Yapılandırma

Aşağıdaki komut dosyasını kullanarak doğrudan "d3js.org" dan yükleyebilirsiniz.

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

Burada, istek API'si JSON, CSV ve TSV'yi ayrıştırmak için yerleşik desteğe sahiptir. Doğrudan isteği veya metni kullanarak ek biçimleri ayrıştırabilirsiniz.

Metin Dosyalarını Yükle

Bir metin dosyası yüklemek için aşağıdaki sözdizimini kullanın.

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

CSV dosyalarını ayrıştırma

Bir CSV dosyasını yüklemek ve ayrıştırmak için aşağıdaki sözdizimini kullanın.

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

Benzer şekilde, JSON ve TSV dosyalarını da yükleyebilirsiniz.

Çalışma Örneği

Bir CSV dosyasının nasıl yüklenip ayrıştırılacağına dair basit bir örnek verelim. Bundan önce, aşağıda gösterildiği gibi d3 uygulama klasörünüzde “sample.csv” adlı bir CSV dosyası oluşturmanız gerekir.

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

Şimdi, aşağıdaki komut dosyasını kullanarak bir web sayfası “request.html” oluşturun.

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

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceksiniz,

API Yöntemlerini İste

Aşağıda en sık kullanılan Requests API yöntemlerinden bazıları verilmiştir.

d3.request (url [, geri arama])
request.header (ad [, değer])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (yöntem [, veri])
request.abort()
d3.csv (url [[, satır], geri arama])

Şimdi bunların her birini kısaca tartışalım.

d3.request (url [, geri arama])

Verilen URL için yeni bir istek döndürür. Bir geri arama atanmışsa, bu bir arama isteği olarak kabul edilir, aksi takdirde istek henüz çağrılmaz. Aşağıda tanımlanmıştır.

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

Aşağıdaki sözdizimini kullanarak bazı sorgu parametrelerini gönderebilirsiniz.

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

Bir istek başlığı veya bir mime türü belirtmek isterseniz, kurucuya bir geri arama belirtmemelisiniz.

request.header (ad [, değer])

Değeri belirtilen adla istek başlığına ayarlamak için kullanılır. Değer belirtilmezse, belirtilen adla istek başlığını kaldırır. Aşağıda tanımlanmıştır.

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

Burada, XMLHttpRequest için X-Requested-With başlığı varsayılan bir istektir.

request.mimeType ([tür])

Mime tipini verilen değere atamak için kullanılır. Aşağıda tanımlanmıştır.

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

request.user ([değer])

Kimlik doğrulama için kullanıcı adını atamak için kullanılır. Bir kullanıcı adı belirtilmezse, varsayılan olarak null olur.

request.password ([değer])

Bir değer belirtilirse, kimlik doğrulama için parolayı belirler.

request.timeout ([zaman aşımı])

Bir zaman aşımı belirtilirse, zaman aşımını belirtilen milisaniye sayısına ayarlar.

request.get ([veriler])

Bu yöntem, isteği GET yöntemi ile göndermek için kullanılır. Aşağıda tanımlanmıştır.

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

request.post ([veri])

Bu yöntem, isteği POST yöntemi ile göndermek için kullanılır. Aşağıda tanımlanmıştır.

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

request.send (yöntem [, veri])

Bu yöntem, isteği verilen GET veya POST yöntemini kullanarak göndermek için kullanılır.

request.abort ()

Bu yöntem, isteği iptal etmek için kullanılır.

d3.csv (url [[, satır], geri arama])

Varsayılan Mime türü text / csv ile belirtilen URL'deki CSV dosyası için yeni bir istek döndürür. Aşağıdaki sözdizimi geri arama olmadan gösterilir.

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

POST yöntemi ile bir geri arama belirtirseniz, aşağıda tanımlanır.

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

Misal

D3 uygulama kök klasör dizininizde "lang.csv" adlı bir csv dosyası oluşturun ve aşağıdaki değişiklikleri ekleyin.

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

Bir “csv.html” web sayfası oluşturun ve buna aşağıdaki komut dosyasını ekleyin.

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

Şimdi, tarayıcıyı isteyin ve aşağıdaki yanıtı göreceğiz.