by 可觀察的

外觀

弧線 ​

弧線產生器會產生一個 圓形 或 環形 扇形，就像在 圓餅 或 甜甜圈 圖表中一樣。弧線的中心在原點；使用 轉換 將弧線移動到不同的位置。

js
svg.append("path")
    .attr("transform", "translate(100,100)")
    .attr("d", d3.arc()({
      innerRadius: 100,
      outerRadius: 200,
      startAngle: -Math.PI / 2,
      endAngle: Math.PI / 2
    }));

如果 起始 和 結束 角度（角度跨度）之間的絕對差大於 2π，弧線產生器會產生一個完整的圓或環。如果小於 2π，弧線的角度長度會等於兩個角度之間的絕對差（如果帶正號的差值為正時順時針旋轉，為負時逆時針旋轉）。如果絕對差小於 2π，弧線可能會有 圓角 和 角度填充。

另請參閱 圓餅產生器，它會計算將資料陣列表示為圓餅或甜甜圈圖表所需的角度；這些角度接著可以傳遞給弧線產生器。

arc() ​

原始碼 · 建立一個具有預設設定的新弧線產生器。預設設定為

js
const arc = d3.arc();

或者，將半徑和角度設定為常數

js
const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(...arguments) ​

原始碼 · 針對給定的 arguments 產生一個弧形。arguments 是任意的；它們會連同 this 物件傳遞到弧形產生器的存取器函式。例如，在預設設定下，會預期一個包含半徑和角度的物件

js
const arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果半徑和角度改為定義為常數，您可以產生一個沒有任何參數的弧形

js
d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2)
  (); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

如果弧形產生器有一個 context，則弧形會以一系列 路徑方法 呼叫的形式呈現在此 context 中，而此函式會傳回 void。否則，會傳回一個 路徑資料 字串。

arc.centroid(...arguments) ​

範例 · 原始碼 · 計算由給定的 arguments 產生 的弧形中心線的中點 [x, y]。

arguments 是任意的；它們會連同 this 物件傳遞到弧形產生器的存取器函式。為了與產生的弧形一致，存取器必須是確定的，即，給定相同的參數時傳回相同的值。中點被定義為 (startAngle + endAngle) / 2 和 (innerRadius + outerRadius) / 2。例如

請注意，這不是弧形的幾何中心，幾何中心可能在弧形外；此方法僅僅是為了方便標籤定位。

arc.innerRadius(radius) ​

原始碼 · 如果指定 radius，則將內半徑設定為指定的函式或數字，並傳回此弧形產生器。

js
const arc = d3.arc().innerRadius(40);

如果未指定 radius，則傳回目前的內半徑存取器。

js
arc.innerRadius() // () => 40

內部半徑存取器預設為

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

將內部半徑指定為函式對於建構堆疊極座長條圖很有用，通常與 平方根比例尺 搭配使用。更常見的是，常數內部半徑用於甜甜圈圖或圓餅圖。如果外部半徑小於內部半徑，則交換內部和外部半徑。負值視為零。

arc.outerRadius(radius) ​

原始碼 · 如果指定 radius，將外部半徑設定為指定函式或數字，並傳回此弧形產生器。

js
const arc = d3.arc().outerRadius(240);

如果未指定 radius，傳回目前的外部半徑存取器。

js
arc.outerRadius() // () => 240

外部半徑存取器預設為

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

將外部半徑指定為函式對於建構雞冠圖或極座長條圖很有用，通常與 平方根比例尺 搭配使用。更常見的是，常數外部半徑用於圓餅圖或甜甜圈圖。如果外部半徑小於內部半徑，則交換內部和外部半徑。負值視為零。

arc.cornerRadius(radius) ​

範例 · 原始碼 · 如果指定 radius，將圓角半徑設定為指定函式或數字，並傳回此弧形產生器。

js
const arc = d3.arc().cornerRadius(18);

如果未指定 radius，傳回目前的圓角半徑存取器。

js
arc.cornerRadius() // () => 18

圓角半徑存取器預設為

js
function cornerRadius() {
  return 0;
}

如果圓角半徑大於零，則使用指定半徑的圓形將弧形的角變圓。對於圓形扇形，兩個外角變圓；對於環形扇形，四個角都變圓。

圓角半徑不得大於 (outerRadius - innerRadius) / 2。此外，對於角跨度小於 π 的弧形，當兩個相鄰的圓角相交時，圓角半徑可能會縮小。內角較常發生這種情況。請參閱 弧形角動畫 以取得說明。

arc.startAngle(angle) ​

原始碼 · 如果指定 angle，將起始角設定為指定函式或數字，並傳回此弧形產生器。

js
const arc = d3.arc().startAngle(Math.PI / 4);

如果未指定 angle，傳回目前的起始角存取器。

js
arc.startAngle() // () => 0.7853981633974483

起始角存取器預設為

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

angle 以弧度指定，0 在 -y（12 點鐘）處，正角順時針進行。如果 |endAngle - startAngle| ≥ 2π，則產生一個完整的圓形或環形，而不是扇形。

arc.endAngle(angle) ​

原始碼 · 如果指定 angle，將結束角設定為指定函式或數字，並傳回此弧形產生器。

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

如果未指定 angle，傳回目前的結束角存取器。

js
arc.endAngle() // () => 3.141592653589793

結束角存取器預設為

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

angle 以弧度指定，0 在 -y（12 點鐘）處，正角順時針進行。如果 |endAngle - startAngle| ≥ 2π，則產生一個完整的圓形或環形，而不是扇形。

arc.padAngle(angle) ​

範例 · 原始碼 · 如果指定 angle，會將填充角度設定為指定的函數或數字，並傳回這個弧形產生器。

js
const arc = d3.arc().padAngle(0);

如果未指定 angle，會傳回目前的填充角度存取器。

js
arc.padAngle() // () => 0

填充角度存取器的預設值為

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

填充角度會轉換為一個固定的線性距離，用於分隔相鄰的弧形，定義為 padRadius × padAngle。這個距離會從弧形的 開始 和 結束 等分扣除。如果弧形形成一個完整的圓或環形，例如當 |endAngle - startAngle| ≥ 2π，則會忽略填充角度。

如果 內半徑 或角度跨度相對於填充角度較小，則可能無法在相鄰的弧形之間維持平行的邊緣。在這種情況下，弧形的內緣可能會縮成一個點，類似於一個圓形扇形。因此，填充通常只會套用在環形扇形（即，當 innerRadius 為正數時），如圖所示

使用填充時建議的最小內半徑為 outerRadius * padAngle / sin(θ)，其中 θ 是填充前最小弧形的角度跨度。例如，如果外半徑為 200 像素，填充角度為 0.02 弧度，一個合理的 θ 是 0.04 弧度，一個合理的內半徑是 100 像素。請參閱 弧形填充動畫 以取得說明。

通常，填充角度並非直接設定在弧形產生器上，而是由 圓餅產生器 計算，以確保填充弧形的面積與其值成正比；請參閱 pie.padAngle。請參閱 圓餅填充動畫 以取得說明。如果您直接將一個常數填充角度套用在弧形產生器上，它會傾向於從較小的弧形中扣除不成比例的部分，造成失真。

arc.padRadius(radius) ​

原始碼 · 如果指定了 radius，則將內距半徑設定為指定的函式或數字，並傳回這個弧形產生器。如果未指定 radius，則傳回目前的內距半徑存取器，預設為 null，表示應自動計算內距半徑為 sqrt(innerRadius × innerRadius + outerRadius × outerRadius)。內距半徑決定了相鄰弧形之間固定的線性距離，定義為 padRadius × padAngle。

arc.context(context) ​

原始碼 · 如果指定了 context，則設定 context 並傳回這個弧形產生器。

js
const context = canvas.getContext("2d");
const arc = d3.arc().context(context);

如果未指定 context，則傳回目前的 context，預設為 null。

js
arc.context() // context

如果 context 不為 null，則將產生的弧形渲染到這個 context 中，作為一系列路徑方法呼叫。否則，傳回一個代表產生的弧形的路徑資料字串。

arc.digits(digits) ​

原始碼 · 如果指定了 digits，則設定小數點後面的最大位數，並傳回這個弧形產生器。

js
const arc = d3.arc().digits(3);

如果未指定 digits，則傳回目前的最大小數位數，預設為 3。

js
arc.digits() // 3

此選項僅適用於關聯的context為 null 時，例如當這個弧形產生器用於產生路徑資料時。