D3.js - Shapes API

บทนี้จะกล่าวถึงเครื่องกำเนิดไฟฟ้ารูปร่างต่างๆใน D3.js

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

คุณสามารถกำหนดค่า Shapes API โดยใช้สคริปต์ต่อไปนี้

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

เครื่องกำเนิดรูปร่าง

D3.js รองรับรูปร่างที่แตกต่างกัน ให้เราดูรายละเอียดรูปร่างที่โดดเด่น

Arcs API

เครื่องกำเนิดอาร์คสร้างรูปวงกลมหรือวงแหวน เราได้ใช้วิธี API เหล่านี้ในบทแผนภูมิวงกลมก่อนหน้านี้ ให้เราเข้าใจรายละเอียดวิธีการ Arcs API ต่างๆ

  • d3.arc() - วิธีนี้ใช้ในการสร้างเครื่องกำเนิดอาร์กใหม่

  • arc(args)- ใช้เพื่อสร้างส่วนโค้งด้วยอาร์กิวเมนต์ที่ระบุ การตั้งค่าเริ่มต้นด้วยรัศมีวัตถุและมุมถูกกำหนดไว้ด้านล่าง

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>
  • arc.centroid(args) - วิธีนี้ใช้ในการคำนวณจุดกึ่งกลาง [x, y] ของเส้นกึ่งกลางของส่วนโค้งด้วยอาร์กิวเมนต์ที่ระบุ

  • arc.innerRadius([radius])- วิธีนี้ใช้เพื่อกำหนดรัศมีภายในจากรัศมีที่กำหนดและส่งคืนเครื่องกำเนิดส่วนโค้ง มีการกำหนดไว้ด้านล่าง -

function innerRadius(d) {
   return d.innerRadius;
}
  • arc.outerRadius([radius])- วิธีนี้ใช้เพื่อกำหนดรัศมีภายนอกจากรัศมีที่กำหนดและส่งคืนเครื่องกำเนิดส่วนโค้ง มีกำหนดดังนี้

function outerRadius(d) {
   return d.outerRadius;
}
  • arc.cornerRadius([radius])- วิธีนี้ใช้เพื่อกำหนดรัศมีมุมจากรัศมีที่กำหนดและส่งคืนเครื่องกำเนิดส่วนโค้ง มีกำหนดดังนี้

function cornerRadius() {
   return 0;
}

ถ้ารัศมีมุมมากกว่าศูนย์มุมของส่วนโค้งจะถูกปัดโดยใช้วงกลมของรัศมีที่กำหนด รัศมีมุมต้องไม่ใหญ่กว่า (outerRadius - innerRadius) / 2

  • arc.startAngle([angle])- วิธีนี้ใช้เพื่อกำหนดมุมเริ่มต้นให้กับฟังก์ชันจากมุมที่กำหนด มีกำหนดดังนี้ -

function startAngle(d) {
   return d.startAngle;
}
  • arc.endAngle([angle])- วิธีนี้ใช้เพื่อกำหนดมุมสิ้นสุดให้กับฟังก์ชันจากมุมที่กำหนด มีกำหนดดังนี้

function endAngle(d) {
   return d.endAngle;
}
  • arc.padAngle([angle])- วิธีนี้ใช้เพื่อตั้งค่ามุมแผ่นให้กับฟังก์ชันจากมุมที่กำหนด มีกำหนดดังนี้

function padAngle() {
   return d && d.padAngle;
}
  • (x) arc.padRadius([radius])- วิธีนี้ใช้เพื่อตั้งค่ารัศมีแผ่นไปยังฟังก์ชันที่ระบุจากรัศมีที่กำหนด รัศมีแผ่นกำหนดระยะทางเชิงเส้นคงที่โดยแยกส่วนโค้งที่อยู่ติดกันซึ่งกำหนดเป็น padRadius * padAngle

  • (xi) arc.context([context]) - วิธีนี้ใช้เพื่อตั้งค่าบริบทและส่งคืนเครื่องกำเนิดส่วนโค้ง

พาย API

API นี้ใช้ในการสร้าง Pie Generator เราได้ดำเนินการวิธี API เหล่านี้ในบทที่แล้ว เราจะพูดถึงวิธีการเหล่านั้นทั้งหมดโดยละเอียด

  • d3.pie() - สร้างเครื่องกำเนิดพายใหม่ด้วยการตั้งค่าเริ่มต้น

  • pie(data[, arguments])- วิธีนี้ใช้ในการสร้างวงกลมสำหรับค่าอาร์เรย์ที่กำหนด ส่งคืนอาร์เรย์ของวัตถุ วัตถุคือมุมโค้งของฐานข้อมูล แต่ละวัตถุมีคุณสมบัติดังต่อไปนี้ -

    • data- ข้อมูลอินพุต องค์ประกอบที่เกี่ยวข้องในอาร์เรย์ข้อมูลอินพุต

    • value - ค่าตัวเลขของส่วนโค้ง

    • index - ดัชนีของส่วนโค้ง

    • startAngle - มุมเริ่มต้นของส่วนโค้ง

    • endAngle - มุมปลายของส่วนโค้ง

    • padAngle - มุมแผ่นของส่วนโค้ง

  • pie.value([value])- วิธีนี้ใช้เพื่อกำหนดค่าให้กับฟังก์ชันที่ระบุและสร้างพาย มีกำหนดดังนี้ -

function value(d) {
   return d;
}
  • pie.sort([compare])- วิธีนี้ใช้เพื่อจัดเรียงข้อมูลไปยังฟังก์ชันที่ระบุและสร้างวงกลม ฟังก์ชันตัวเปรียบเทียบถูกกำหนดไว้ดังนี้

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

ที่นี่ฟังก์ชันเปรียบเทียบใช้อาร์กิวเมนต์ 'a' และ 'b' สองอาร์กิวเมนต์แต่ละองค์ประกอบจากอาร์เรย์ข้อมูลอินพุต ถ้าส่วนโค้งของ 'a' ควรอยู่ก่อนส่วนโค้งสำหรับ 'b' ตัวเปรียบเทียบจะต้องส่งคืนตัวเลขที่น้อยกว่าศูนย์ ถ้าส่วนโค้งของ 'a' ควรอยู่หลังส่วนโค้งของ 'b' ตัวเปรียบเทียบจะต้องส่งคืนตัวเลขที่มากกว่าศูนย์

  • pie.sortValues([compare])- วิธีนี้ใช้เพื่อเปรียบเทียบค่าจากฟังก์ชันที่กำหนดและสร้างวงกลม มีการกำหนดฟังก์ชันดังนี้

function compare(a, b) {
   return b - a;
}
  • pie.startAngle([angle])- วิธีนี้ใช้เพื่อกำหนดมุมเริ่มต้นของวงกลมให้เป็นฟังก์ชันที่ระบุ หากไม่ได้ระบุมุมจะส่งกลับมุมเริ่มต้นปัจจุบัน มีกำหนดดังนี้

function startAngle() {
   return 0;
}
  • pie.endAngle([angle])- วิธีนี้ใช้เพื่อตั้งค่ามุมปลายของพายให้เป็นฟังก์ชันที่ระบุ หากไม่ได้ระบุมุมจะส่งกลับมุมสิ้นสุดปัจจุบัน มีกำหนดดังนี้

function endAngle() {
   return 2 * Math.PI;
}
  • pie.padAngle([angle])- วิธีนี้ใช้เพื่อกำหนดมุมแผ่นให้เป็นฟังก์ชันที่ระบุและสร้างพาย มีการกำหนดฟังก์ชันดังนี้

function padAngle() {
   return 0;
}

Lines API

Lines API ใช้เพื่อสร้างบรรทัด เราได้ใช้เมธอด API เหล่านี้ในไฟล์Graphsบท. ให้เราผ่านแต่ละวิธีโดยละเอียด

  • d3.line() - วิธีนี้ใช้เพื่อสร้างตัวสร้างบรรทัดใหม่

  • line(data) - วิธีนี้ใช้เพื่อสร้างบรรทัดสำหรับอาร์เรย์ของข้อมูลที่กำหนด

  • line.x([x])- วิธีนี้ใช้เพื่อตั้งค่า x accessor เป็นฟังก์ชันที่ระบุและสร้างบรรทัด ฟังก์ชันถูกกำหนดไว้ด้านล่าง

function x(d) {
   return d[0];
}
  • line.y([y])- วิธีนี้ใช้เพื่อตั้งค่าตัวเข้าถึง 'y' 'เป็นฟังก์ชันที่ระบุและสร้างบรรทัด มีการกำหนดฟังก์ชันดังนี้

function y(d) {
   return d[1];
}
  • line.defined([defined])- วิธีนี้ใช้เพื่อตั้งค่าตัวเข้าถึงที่กำหนดเป็นฟังก์ชันที่ระบุ มีกำหนดดังนี้

function defined() {
  return true;
}
  • line.curve([curve]) - ใช้เพื่อกำหนดเส้นโค้งและสร้างเส้น

  • line.context([context])- วิธีนี้ใช้เพื่อกำหนดบริบทและสร้างบรรทัด หากไม่ได้ระบุบริบทจะส่งกลับค่าว่าง

  • d3.lineRadial()- วิธีนี้ใช้เพื่อสร้างเส้นเรเดียลใหม่ มันเทียบเท่ากับเครื่องกำเนิดเส้นคาร์ทีเซียน

  • lineRadial.radius([radius])- วิธีนี้ใช้เพื่อวาดเส้นเรเดียลและ accessor จะส่งกลับรัศมี ใช้ระยะทางจากจุดกำเนิด (0,0)

ในบทต่อไปเราจะเรียนรู้เกี่ยวกับ Colors API ใน D3.js