D3.js - 形狀 API

Created: November-04, 2018

本章討論 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;
}

arc.padRadius（[radius]） - 此方法用於將焊盤半徑設定為給定半徑的指定函式。墊半徑確定分隔相鄰弧的固定線性距離，定義為 padRadius * padAngle。
arc.context（[context]） - 該方法用於設定上下文並返回一個弧生成器。

餅 API

此 API 用於建立 Pie 生成器。我們在前一章中已經執行了這些 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); }
);

這裡，compare 函式接受兩個引數’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 方法。讓我們詳細介紹每種方法。

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 中的 Colors API。