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