D3.js - API hình dạng

Chương này thảo luận về các trình tạo hình dạng khác nhau trong D3.js.

Định cấu hình API

Bạn có thể định cấu hình API Hình dạng bằng cách sử dụng tập lệnh sau.

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

</script>

Máy tạo hình dạng

D3.js hỗ trợ các hình dạng khác nhau. Hãy để chúng tôi đi qua các hình dạng nổi bật một cách chi tiết.

API vòng cung

Bộ tạo hồ quang tạo ra hình tròn hoặc hình khuyên. Chúng tôi đã sử dụng các phương thức API này trong chương biểu đồ hình tròn trước. Hãy để chúng tôi hiểu chi tiết các phương thức API Arcs khác nhau.

d3.arc() - Phương pháp này dùng để tạo một bộ tạo hồ quang mới.
arc(args)- Nó được sử dụng để tạo một cung với các đối số được chỉ định. Cài đặt mặc định với bán kính và góc đối tượng được xác định bên dưới.

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

arc.centroid(args) - Phương pháp này dùng để tính điểm giữa [x, y] của đường tâm cung với các đối số được chỉ định.
arc.innerRadius([radius])- Phương pháp này được sử dụng để thiết lập bán kính bên trong từ bán kính đã cho và trả về một bộ tạo hồ quang. Nó được định nghĩa dưới đây -

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

arc.outerRadius([radius])- Phương pháp này được sử dụng để thiết lập bán kính ngoài từ bán kính đã cho và trả về một bộ tạo hồ quang. Nó được định nghĩa như sau.

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

arc.cornerRadius([radius])- Phương pháp này được sử dụng để thiết lập bán kính góc từ bán kính đã cho và trả về một bộ tạo hồ quang. Nó được định nghĩa như sau.

function cornerRadius() {
   return 0;
}

Nếu bán kính góc lớn hơn 0, các góc của cung tròn được làm tròn bằng cách sử dụng các đường tròn của bán kính đã cho. Bán kính góc không được lớn hơn (externalRadius - innerRadius) / 2.

arc.startAngle([angle])- Phương pháp này được sử dụng để đặt góc bắt đầu cho hàm từ góc cho trước. Nó được định nghĩa như sau:

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

arc.endAngle([angle])- Phương pháp này được sử dụng để đặt góc kết thúc cho hàm từ góc cho trước. Nó được định nghĩa như sau.

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

arc.padAngle([angle])- Phương pháp này được sử dụng để đặt góc đệm cho hàm từ một góc cho trước. Nó được định nghĩa như sau.

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

(x) arc.padRadius([radius])- Phương pháp này được sử dụng để thiết lập bán kính pad cho chức năng được chỉ định từ bán kính đã cho. Bán kính pad xác định khoảng cách tuyến tính cố định ngăn cách các cung liền kề, được định nghĩa là padRadius * padAngle.
(xi) arc.context([context]) - Phương thức này được sử dụng để thiết lập ngữ cảnh và trả về một bộ tạo hồ quang.

API Pies

API này được sử dụng để tạo trình tạo Pie. Chúng tôi đã thực hiện các phương thức API này trong chương trước. Chúng tôi sẽ thảo luận chi tiết về tất cả các phương pháp đó.

d3.pie() - Xây dựng trình tạo bánh mới với cài đặt mặc định.
pie(data[, arguments])- Phương thức này được sử dụng để tạo một bánh cho các giá trị mảng đã cho. Nó trả về một mảng các đối tượng. Đối tượng là góc cung của datum. Mỗi đối tượng có các thuộc tính sau:
- data- dữ liệu đầu vào; phần tử tương ứng trong mảng dữ liệu đầu vào.
- value - giá trị số của cung.
- index - chỉ số của cung tròn.
- startAngle - góc bắt đầu của cung tròn.
- endAngle - góc cuối của cung tròn.
- padAngle - góc đệm của cung tròn.
pie.value([value])- Phương thức này được sử dụng để đặt giá trị cho hàm được chỉ định và tạo ra một chiếc bánh. Nó được định nghĩa như sau:

function value(d) {
   return d;
}

pie.sort([compare])- Phương pháp này được sử dụng để sắp xếp dữ liệu theo chức năng được chỉ định và tạo bánh. Hàm so sánh được định nghĩa như sau.

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

Ở đây, hàm so sánh nhận hai đối số 'a' và 'b', mỗi phần tử từ mảng dữ liệu đầu vào. Nếu cung cho 'a' phải trước cung cho 'b', thì bộ so sánh phải trả về một số nhỏ hơn 0. Nếu cung cho 'a' phải sau cung cho 'b', thì bộ so sánh phải trả về một số lớn hơn 0.

pie.sortValues([compare])- Phương pháp này được sử dụng để so sánh giá trị từ hàm đã cho và tạo ra một chiếc bánh. Hàm được định nghĩa như sau.

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

pie.startAngle([angle])- Phương pháp này được sử dụng để thiết lập góc bắt đầu của bánh răng đến chức năng được chỉ định. Nếu góc không được chỉ định, nó sẽ trả về góc bắt đầu hiện tại. Nó được định nghĩa như sau.

function startAngle() {
   return 0;
}

pie.endAngle([angle])- Phương pháp này được sử dụng để thiết lập góc kết thúc của bánh đến chức năng được chỉ định. Nếu góc không được chỉ định, nó sẽ trả về góc kết thúc hiện tại. Nó được định nghĩa như sau.

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

pie.padAngle([angle])- Phương pháp này được sử dụng để đặt góc miếng đệm đến chức năng được chỉ định và tạo hình bánh. Hàm được định nghĩa như sau.

function padAngle() {
   return 0;
}

API dòng

API dòng được sử dụng để tạo một dòng. Chúng tôi đã sử dụng các phương thức API này trongGraphschương. Hãy để chúng tôi đi qua từng phương pháp chi tiết.

d3.line() - Phương pháp này dùng để tạo bộ tạo dòng mới.
line(data) - Phương thức này được sử dụng để tạo một dòng cho mảng dữ liệu đã cho.
line.x([x])- Phương thức này được sử dụng để đặt bộ truy cập x thành chức năng được chỉ định và tạo ra một dòng. Hàm được định nghĩa bên dưới,

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

line.y([y])- Phương thức này được sử dụng để đặt bộ truy cập 'y' vào chức năng được chỉ định và tạo một dòng. Hàm được định nghĩa như sau.

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

line.defined([defined])- Phương thức này được sử dụng để đặt bộ truy cập đã xác định cho chức năng được chỉ định. Nó được định nghĩa như sau.

function defined() {
  return true;
}

line.curve([curve]) - Nó được sử dụng để thiết lập đường cong và tạo đường thẳng.
line.context([context])- Phương thức này được sử dụng để thiết lập ngữ cảnh và tạo một dòng. Nếu ngữ cảnh không được chỉ định, nó trả về null.
d3.lineRadial()- Phương pháp này được sử dụng để tạo đường xuyên tâm mới; nó tương đương với máy phát dòng Descartes.
lineRadial.radius([radius])- Phương pháp này được sử dụng để vẽ một đường xuyên tâm và bộ truy cập trả về bán kính. Nó có khoảng cách từ điểm gốc (0,0).

Trong chương tiếp theo, chúng ta sẽ tìm hiểu về API màu trong D3.js.