D3.js - 形狀 API

本章討論 D3.js 中不同的形狀生成器。

配置 API

您可以使用以下指令碼配置形狀 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 支援不同的形狀。讓我們詳細瞭解主要的形狀。

弧形 API

弧形生成器產生圓形或環形形狀。我們在之前的餅圖章節中使用了這些 API 方法。讓我們詳細瞭解各種弧形 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 用於建立餅圖生成器。我們在上一章中執行了這些 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;
}

線條 API

線條 API 用於生成線條。我們在**圖表**章節中使用了這些 API 方法。讓我們詳細瞭解每個方法。

d3.line() − 此方法用於建立一個新的線條生成器。
line(data) − 此方法用於為給定的資料陣列生成線條。
line.x([x]) − 此方法用於將 x 訪問器設定為指定的函式並生成線條。函式定義如下：

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]) − 此方法用於設定上下文並生成線條。如果未指定上下文，則返回 null。
d3.lineRadial() − 此方法用於建立新的徑向線；它等效於笛卡爾線生成器。
lineRadial.radius([radius]) − 此方法用於繪製徑向線，訪問器返回半徑。它採用距原點 (0,0) 的距離。

在下一章中，我們將學習 D3.js 中的顏色 API。

列印頁面