D3.js - API ค่าที่คั่นด้วยตัวคั่น

ตัวคั่นคือลำดับของอักขระตั้งแต่หนึ่งตัวขึ้นไปที่ใช้เพื่อระบุขอบเขตระหว่างพื้นที่ที่แยกจากกันเป็นอิสระในข้อความธรรมดาหรือข้อมูลอื่น ๆ ตัวคั่นฟิลด์คือลำดับของค่าที่คั่นด้วยเครื่องหมายจุลภาค ค่าที่คั่นด้วยตัวคั่นคือcomma separated values (CSV) หรือ tab-separated values(TSV). บทนี้จะอธิบายรายละเอียดเกี่ยวกับค่าที่คั่นด้วยตัวคั่น

การกำหนดค่า API

เราสามารถโหลด API ได้อย่างง่ายดายโดยใช้ไวยากรณ์ต่อไปนี้

<script src = "https://d3js.org/d3-dsv.v1.min.js"></script>
<script>
   var data = d3.csvParse(string);
</script>

วิธี API

ต่อไปนี้เป็นวิธี API ต่างๆของค่าที่คั่นด้วยตัวคั่น

d3.csvParse (สตริง [แถว])
d3.csvParseRows (สตริง [แถว])
d3.csvFormat (แถว [คอลัมน์])
d3.csvFormatRows(rows)
d3.tsvParse (สตริง [แถว])
d3.tsvParseRows (สตริง [, แถว])
d3.tsvFormat (แถว [คอลัมน์])
d3.tsvFormatRows(rows)

ให้เราดูรายละเอียดวิธีการ API เหล่านี้แต่ละวิธี

d3.csvParse (สตริง [แถว])

วิธีนี้ใช้เพื่อแยกวิเคราะห์รูปแบบ csv พิจารณาไฟล์data.csv ที่แสดงด้านล่าง

year,population
2006,40
2008,45
2010,48
2012,51
2014,53
2016,57
2017,62

ตอนนี้เราสามารถใช้ฟังก์ชันที่ระบุข้างต้นได้

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var data = d3.csvParse(string, function(d) {
   return {
      year: new Date(+d.Year, 0, 1), // lowercase and convert "Year" to Date
      population: d.population
   };
});

ในที่นี้จะแยกวิเคราะห์สตริงที่ระบุในค่าที่คั่นด้วยตัวคั่น ส่งคืนอาร์เรย์ของวัตถุที่แสดงแถวที่แยกวิเคราะห์

d3.csvParseRows (สตริง [แถว])

วิธีนี้ใช้เพื่อแยกวิเคราะห์รูปแบบ csv ที่เทียบเท่ากับแถว

var data = d3.csvParseRows(string, function(d, i) {
   return {
      year: new Date(+d[0], 0, 1), // convert first colum column to Date
      population: d[1],
   };
});

มันแยกแต่ละแถวในไฟล์ csv

d3.csvFormat (แถว [คอลัมน์])

วิธีนี้ใช้เพื่อจัดรูปแบบแถวและคอลัมน์ csv

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var string = d3.csvFormat(data, ["year", "population"]);

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

d3.csvFormatRows (แถว)

วิธีนี้ใช้เพื่อจัดรูปแบบแถว csv

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var string = d3.csvFormatRows(data.map(function(d, i) {
   return [
      d.year.getFullYear(), // Assuming d.year is a Date object.
      d.population
   ];
}));

ในที่นี้จะจัดรูปแบบอาร์เรย์ของแถวสตริงที่ระบุเป็นค่าที่คั่นด้วยตัวคั่นโดยส่งคืนสตริง