D3.js - Shapes API

Bab ini membahas berbagai generator bentuk di D3.js.

Konfigurasi API

Anda dapat mengonfigurasi Shapes API menggunakan skrip berikut.

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

</script>

Generator Bentuk

D3.js mendukung berbagai bentuk. Mari kita telusuri bentuk yang menonjol secara detail.

Arcs API

Generator busur menghasilkan bentuk lingkaran atau annulus. Kami telah menggunakan metode API ini di bab diagram lingkaran sebelumnya. Mari kita pahami berbagai metode API Arcs secara mendetail.

d3.arc() - Metode ini digunakan untuk membuat generator busur baru.
arc(args)- Ini digunakan untuk menghasilkan busur dengan argumen yang diberikan yang ditentukan. Pengaturan default dengan radius dan sudut objek didefinisikan di bawah ini.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

arc.centroid(args) - Metode ini digunakan untuk menghitung titik tengah [x, y] dari garis tengah busur dengan argumen yang ditentukan.
arc.innerRadius([radius])- Metode ini digunakan untuk mengatur radius dalam dari radius yang diberikan dan mengembalikan generator busur. Ini didefinisikan di bawah -

function innerRadius(d) {
   return d.innerRadius;
}

arc.outerRadius([radius])- Metode ini digunakan untuk mengatur radius terluar dari radius yang diberikan dan mengembalikan generator busur. Ini didefinisikan sebagai berikut.

function outerRadius(d) {
   return d.outerRadius;
}

arc.cornerRadius([radius])- Metode ini digunakan untuk mengatur radius sudut dari radius yang diberikan dan mengembalikan generator busur. Ini didefinisikan sebagai berikut.

function cornerRadius() {
   return 0;
}

Jika jari-jari sudut lebih besar dari nol, sudut-sudut busur dibulatkan menggunakan lingkaran-lingkaran pada jari-jari yang diberikan. Radius sudut tidak boleh lebih besar dari (outerRadius - innerRadius) / 2.

arc.startAngle([angle])- Metode ini digunakan untuk mengatur sudut awal ke fungsi dari sudut yang diberikan. Ini didefinisikan sebagai berikut -

function startAngle(d) {
   return d.startAngle;
}

arc.endAngle([angle])- Metode ini digunakan untuk mengatur sudut ujung ke fungsi dari sudut yang diberikan. Ini didefinisikan sebagai berikut.

function endAngle(d) {
   return d.endAngle;
}

arc.padAngle([angle])- Metode ini digunakan untuk mengatur sudut bantalan ke fungsi dari sudut yang diberikan. Ini didefinisikan sebagai berikut.

function padAngle() {
   return d && d.padAngle;
}

(x) arc.padRadius([radius])- Metode ini digunakan untuk mengatur radius bantalan ke fungsi yang ditentukan dari radius yang diberikan. Radius pad menentukan jarak linier tetap yang memisahkan busur yang berdekatan, yang didefinisikan sebagai padRadius * padAngle.
(xi) arc.context([context]) - Metode ini digunakan untuk mengatur konteks dan mengembalikan generator busur.

Pies API

API ini digunakan untuk membuat generator Pie. Kami telah melakukan metode API ini di bab sebelumnya. Kami akan membahas semua metode tersebut secara rinci.

d3.pie() - Membuat generator pai baru dengan pengaturan default.
pie(data[, arguments])- Metode ini digunakan untuk menghasilkan pai untuk nilai array yang diberikan. Ini mengembalikan array objek. Objek adalah sudut busur datum. Setiap objek memiliki properti berikut -
- data- datum masukan; elemen yang sesuai dalam larik data masukan.
- value - nilai numerik busur.
- index - indeks busur.
- startAngle - sudut awal busur.
- endAngle - sudut ujung busur.
- padAngle - sudut bantalan busur.
pie.value([value])- Metode ini digunakan untuk menyetel nilai ke fungsi yang ditentukan dan menghasilkan pai. Ini didefinisikan sebagai berikut -

function value(d) {
   return d;
}

pie.sort([compare])- Metode ini digunakan untuk mengurutkan data ke fungsi yang ditentukan dan menghasilkan pai. Fungsi pembanding didefinisikan sebagai berikut.

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

Di sini, fungsi bandingkan mengambil dua argumen 'a' dan 'b', masing-masing elemen dari larik data masukan. Jika busur untuk 'a' harus sebelum busur untuk 'b', maka pembanding harus mengembalikan angka yang kurang dari nol. Jika busur untuk 'a' harus setelah busur untuk 'b', maka pembanding harus mengembalikan angka yang lebih besar dari nol.

pie.sortValues([compare])- Metode ini digunakan untuk membandingkan nilai dari fungsi yang diberikan dan menghasilkan kue. Fungsi tersebut didefinisikan sebagai berikut.

function compare(a, b) {
   return b - a;
}

pie.startAngle([angle])- Metode ini digunakan untuk mengatur sudut awal pai ke fungsi yang ditentukan. Jika sudut tidak ditentukan, ini mengembalikan sudut awal saat ini. Ini didefinisikan sebagai berikut.

function startAngle() {
   return 0;
}

pie.endAngle([angle])- Metode ini digunakan untuk mengatur sudut ujung pai ke fungsi yang ditentukan. Jika sudut tidak ditentukan, ini mengembalikan sudut akhir saat ini. Ini didefinisikan sebagai berikut.

function endAngle() {
   return 2 * Math.PI;
}

pie.padAngle([angle])- Metode ini digunakan untuk mengatur sudut bantalan ke fungsi yang ditentukan dan menghasilkan pai. Fungsi tersebut didefinisikan sebagai berikut.

function padAngle() {
   return 0;
}

Lines API

Lines API digunakan untuk menghasilkan garis. Kami telah menggunakan metode API ini diGraphsbab. Mari kita bahas setiap metode secara mendetail.

d3.line() - Metode ini digunakan untuk membuat generator baris baru.
line(data) - Metode ini digunakan untuk menghasilkan garis untuk larik data tertentu.
line.x([x])- Metode ini digunakan untuk mengatur x accessor ke fungsi yang ditentukan dan menghasilkan garis. Fungsi tersebut didefinisikan di bawah ini,

function x(d) {
   return d[0];
}

line.y([y])- Metode ini digunakan untuk menyetel aksesor 'y' 'ke fungsi yang ditentukan dan menghasilkan garis. Fungsi tersebut didefinisikan sebagai berikut.

function y(d) {
   return d[1];
}

line.defined([defined])- Metode ini digunakan untuk mengatur pengakses yang ditentukan ke fungsi yang ditentukan. Ini didefinisikan sebagai berikut.

function defined() {
  return true;
}

line.curve([curve]) - Digunakan untuk mengatur kurva dan menghasilkan garis.
line.context([context])- Metode ini digunakan untuk mengatur konteks dan menghasilkan garis. Jika konteksnya tidak ditentukan, ia mengembalikan null.
d3.lineRadial()- Metode ini digunakan untuk membuat garis radial baru; itu setara dengan generator garis Cartesian.
lineRadial.radius([radius])- Metode ini digunakan untuk menggambar garis radial dan pengakses mengembalikan radius. Dibutuhkan jarak dari asal (0,0).

Pada bab selanjutnya, kita akan belajar tentang API Warna di D3.js.