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
   ];
}));

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

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

วิธีนี้ใช้เพื่อแยกวิเคราะห์รูปแบบ tsv มันคล้ายกับ csvParse

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

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

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

วิธีนี้ใช้ในการจัดรูปแบบแถวและคอลัมน์ tsv

d3.tsvFormatRows (แถว)

วิธีนี้ใช้ในการจัดรูปแบบแถว tsv