D3.js - API คำขอ

D3.js จัดเตรียม API คำขอเพื่อดำเนินการ XMLHttpRequest บทนี้จะอธิบายรายละเอียดเกี่ยวกับคำขอ API ต่างๆ

XMLHttpRequest

XMLHttpRequest เป็นไคลเอ็นต์ http ในตัวเพื่อจำลองอ็อบเจ็กต์ XMLHttpRequest ของเบราว์เซอร์ สามารถใช้กับ JS ที่ออกแบบมาสำหรับเบราว์เซอร์เพื่อปรับปรุงการนำโค้ดกลับมาใช้ใหม่และอนุญาตให้ใช้ไลบรารีที่มีอยู่

คุณสามารถรวมโมดูลในโปรเจ็กต์ของคุณและใช้เป็นอ็อบเจ็กต์ XHR บนเบราว์เซอร์ได้ตามที่อธิบายด้านล่าง

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

รองรับทั้งการร้องขอแบบ async และแบบซิงโครนัสและดำเนินการ 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 ก่อนหน้านั้นคุณต้องสร้างไฟล์ CSV ชื่อ“ sample.csv” ในโฟลเดอร์แอปพลิเคชัน d3 ดังที่แสดงด้านล่าง

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

ตอนนี้สร้างหน้าเว็บ“ request.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

ต่อไปนี้เป็นวิธีการ API คำขอที่ใช้บ่อยที่สุด

d3.request (url [โทรกลับ])
request.header (ชื่อ [ค่า])
request.mimeType([type])
request.user([value])
request.password([value])
request.timeout([timeout])
request.get([data])
request.post([data])
request.send (วิธีการ [ข้อมูล])
request.abort()
d3.csv (url [[, row], callback])

ตอนนี้ให้เราคุยกันสั้น ๆ

d3.request (url [โทรกลับ])

ส่งคืนคำขอใหม่สำหรับ 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);

หากคุณต้องการระบุส่วนหัวของคำขอหรือประเภทละครใบ้คุณต้องไม่ระบุการเรียกกลับไปยังตัวสร้าง

request.header (ชื่อ [ค่า])

ใช้เพื่อตั้งค่าให้กับส่วนหัวของคำร้องขอด้วยชื่อที่ระบุ หากไม่มีการระบุค่าจะลบส่วนหัวของคำขอที่มีชื่อที่ระบุ มีการกำหนดไว้ด้านล่าง

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

ที่นี่ X-Requested-With ส่วนหัวเป็น XMLHttpRequest เป็นคำขอเริ่มต้น

request.mimeType ([ชนิด])

ใช้เพื่อกำหนดประเภท mime ให้กับค่าที่กำหนด มีการกำหนดไว้ด้านล่าง

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

request.user ([ค่า])

ใช้เพื่อกำหนดชื่อผู้ใช้สำหรับการตรวจสอบสิทธิ์ หากไม่ได้ระบุชื่อผู้ใช้จะมีค่าเริ่มต้นเป็น null

request.password ([ค่า])

หากระบุค่าจะตั้งรหัสผ่านสำหรับการพิสูจน์ตัวตน

request.timeout ([หมดเวลา])

หากระบุการหมดเวลาระบบจะตั้งค่าการหมดเวลาเป็นจำนวนมิลลิวินาทีที่ระบุ

request.get ([ข้อมูล])

วิธีนี้ใช้ในการส่งคำขอด้วยเมธอด GET มีการกำหนดไว้ด้านล่าง

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

request.post ([ข้อมูล])

วิธีนี้ใช้ในการส่งคำขอด้วยวิธีการ POST มีการกำหนดไว้ด้านล่าง

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

request.send (วิธีการ [ข้อมูล])

วิธีนี้ใช้เพื่อส่งคำขอโดยใช้เมธอด GET หรือ POST ที่กำหนด

request.abort ()

วิธีนี้ใช้เพื่อยกเลิกการร้องขอ

d3.csv (url [[, row], callback])

ส่งคืนคำขอใหม่สำหรับไฟล์ CSV ที่ URL ที่ระบุพร้อมด้วยข้อความประเภท Mime เริ่มต้น / 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);

ตัวอย่าง

สร้างไฟล์ csv ชื่อ“ lang.csv” ในไดเร็กทอรีโฟลเดอร์รากของแอปพลิเคชัน d3 ของคุณและเพิ่มการเปลี่ยนแปลงต่อไปนี้

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>

ตอนนี้ขอเบราว์เซอร์แล้วเราจะเห็นคำตอบต่อไปนี้