by Observable

外觀

圓餅圖 ​

範例 · 圓餅圖產生器會計算出將表格資料集表示為圓餅圖或甜甜圈圖所需的角度；然後可以將這些角度傳遞給 弧線產生器。（圓餅圖產生器不會直接產生形狀。）

pie() ​

原始碼 · 建立一個具有預設設定的新圓餅圖產生器。

js
const pie = d3.pie();

pie(data, ...arguments) ​

原始碼 · 為給定的 data 陣列產生一個圓餅圖，傳回一個物件陣列，表示每個資料點的弧線角度。例如，給定一組數字，以下是計算圓餅圖角度的方法

js
const data = [1, 1, 2, 3, 5, 8, 13, 21];
const pie = d3.pie();
const arcs = pie(data);

產生的 arcs 是物件陣列

json
[
  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
  {"data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
  {"data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
  {"data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
  {"data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
  {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0},
  {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0}
]

傳回陣列中的每個物件都有下列屬性

此表示法設計為與弧形產生器的預設 startAngle、endAngle 和 padAngle 存取器搭配使用。角度以弧度表示，0 位於 -y（12 點鐘），正角順時針進行。

傳回陣列的長度與 data 相同，且傳回陣列中的每個元素 i 對應輸入資料中的元素 i。傳回的弧形陣列與資料順序相同，即使圓餅圖已 排序 也是如此。

任何額外的 arguments 都是任意的；它們會連同 this 物件傳遞到圓餅產生器的存取器函數。

pie.value(value) ​

原始碼 · 如果指定 value，會將值存取器設定為指定的函數或數字，並傳回此圓餅產生器。

js
const pie = d3.pie().value((d) => d.value);

產生圓餅時，會對輸入資料陣列中的每個元素呼叫值存取器，傳入元素 d、索引 i 和陣列 data 作為三個引數。

如果未指定 value，會傳回目前的存取器。

js
pie.value() // (d) => d.value

值存取器的預設值為

js
function value(d) {
  return d;
}

預設值存取器假設輸入資料是數字，或可以使用 valueOf 將其強制轉換為數字。如果資料不是數字，則應指定一個存取器，以傳回給定資料項的對應數字值。例如，假設有一個 CSV 檔案，其中有 number 和 name 欄位

number,name
4,Locke
8,Reyes
15,Ford
16,Jarrah
23,Shephard
42,Kwon

你可以這樣做

js
const data = await d3.csv("lost.csv", d3.autoType);
const pie = d3.pie().value((d) => d.number);
const arcs = pie(data);

這類似於在呼叫圓餅產生器之前將資料 對應 到值

js
const arcs = d3.pie()(data.map((d) => d.number));

存取器的優點是輸入資料會與傳回的物件保持關聯，因此更容易存取資料的其他欄位，例如設定顏色或新增文字標籤。

pie.sort(compare) ​

原始碼 · 如果指定 compare，會將資料比較器設定為指定的函數，並傳回此圓餅產生器。

js
const pie = d3.pie().sort((a, b) => d3.ascending(a.name, b.name));

資料比較器接受兩個引數 a 和 b，每個元素都來自輸入資料陣列。如果 a 的弧應該在 b 的弧之前，則比較器必須傳回小於零的數字；如果 a 的弧應該在 b 的弧之後，則比較器必須傳回大於零的數字；傳回零表示 a 和 b 的相對順序未指定。

如果未指定 compare，則傳回目前的資料比較器。

js
pie.sort() // (a, b) => d3.ascending(a.name, b.name))

資料比較器的預設值為 null。如果資料比較器和 值比較器 都是 null，則弧會按照原始輸入順序定位。設定資料比較器會隱含設定值比較器為 null。

排序不會影響 產生的弧陣列 的順序，該順序始終與輸入資料陣列的順序相同；它只會影響每個弧的計算角度。第一個弧從 起始角度 開始，最後一個弧在 結束角度 結束。

pie.sortValues(compare) ​

來源 · 如果指定了 compare，則將值比較器設定為指定的函式，並傳回此圓餅圖產生器。

js
const pie = d3.pie().sortValue(d3.ascending);

值比較器類似於 資料比較器，但兩個引數 a 和 b 是使用 值存取器 從輸入資料陣列衍生的值，而不是資料元素。如果 a 的弧應該在 b 的弧之前，則比較器必須傳回小於零的數字；如果 a 的弧應該在 b 的弧之後，則比較器必須傳回大於零的數字；傳回零表示 a 和 b 的相對順序未指定。

如果未指定 compare，則傳回目前的資料比較器。

js
pie.sortValue() // d3.ascending

值比較器的預設值為 遞減。如果 資料比較器 和值比較器都是 null，則弧會按照原始輸入順序定位。設定值比較器會隱含設定 資料比較器 為 null。

排序不會影響 產生的弧陣列 的順序，該順序始終與輸入資料陣列的順序相同；它只會影響每個弧的計算角度。第一個弧從 起始角度 開始，最後一個弧在 結束角度 結束。

pie.startAngle(angle) ​

來源 · 如果指定了 angle，則將圓餅圖的整體起始角度設定為指定的函式或數字，並傳回此圓餅圖產生器。

js
const pie = d3.pie().startAngle(0);

開始角度是圓餅圖的整體開始角度，即第一個弧形的開始角度。它通常表示為一個常數，但也可以表示為資料的函數。當它是一個函數時，開始角度存取器會被呼叫一次，傳遞給它的參數和 this 的內容與 圓餅圖產生器 相同。

如果沒有指定角度，則傳回目前的開始角度存取器。

js
pie.startAngle() // () => 0

開始角度存取器的預設值為

js
function startAngle() {
  return 0;
}

角度以弧度表示，其中 0 位於 -y（12 點鐘），正角度順時針進行。

pie.endAngle(angle) ​

原始碼 · 如果指定了角度，則將圓餅圖的整體結束角度設定為指定的函數或數字，並傳回這個圓餅圖產生器。

js
const pie = d3.pie().endAngle(Math.PI);

這裡的結束角度是指圓餅圖的整體結束角度，即最後一個弧形的結束角度。它通常表示為一個常數，但也可以表示為資料的函數。當它是一個函數時，結束角度存取器會被呼叫一次，傳遞給它的參數和 this 的內容與 圓餅圖產生器 相同。

如果沒有指定角度，則傳回目前的結束角度存取器。

js
pie.endAngle() // () => Math.PI

結束角度存取器的預設值為

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

角度以弧度表示，其中 0 位於 -y（12 點鐘），正角度順時針進行。結束角度的值受限於 開始角度 ± τ，使得 |結束角度 - 開始角度| ≤ τ。

pie.padAngle(angle) ​

範例 · 原始碼 · 如果指定了角度，則將間隔角度設定為指定的函數或數字，並傳回這個圓餅圖產生器。

js
const pie = d3.pie().padAngle(0.03);

間隔角度指定相鄰弧形之間以弧度表示的角度間隔。間隔的總量是指定的角度乘以輸入資料陣列中元素的數量，並且最多為 |結束角度 - 開始角度|；其餘的空間會按比例由 值 分配，以保留每個弧形的相對面積。

間隔角度通常表示為一個常數，但也可以表示為資料的函數。當它是一個函數時，間隔角度存取器會被呼叫一次，傳遞給它的參數和 this 的內容與 圓餅圖產生器 相同。

如果沒有指定角度，則傳回目前的間隔角度存取器。

js
pie.padAngle() // () => 0.03

預設的填充角度存取器為

js
function padAngle() {
  return 0;
}