作成者Observable

外観

アーク ​

アークジェネレーターは、円形または環状の扇形を生成します。これはパイまたはドーナツグラフの場合のように使用されます。アークは原点を中心に配置されます。アークを別の位置に移動するには、変換を使用してください。

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つの角度の絶対差に等しくなります（符号付きの差が正の場合は時計回りに、負の場合は反時計回りに進みます）。絶対差が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"

アークジェネレーターにコンテキストがある場合、アークはこのコンテキストにパスメソッド呼び出しのシーケンスとしてレンダリングされ、この関数は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;
}

内半径を関数として指定することは、多くの場合、sqrtスケールと組み合わせて、積み重ねられた極座標棒グラフを作成するのに役立ちます。より一般的には、ドーナツグラフやパイグラフには一定の内半径が使用されます。外半径が内半径より小さい場合、内半径と外半径が入れ替えられます。負の値はゼロとして扱われます。

arc.outerRadius(radius) ​

ソース · radiusが指定されている場合、外半径を指定された関数または数値に設定し、このアークジェネレーターを返します。

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

radiusが指定されていない場合、現在の外半径アクセサーを返します。

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

外半径アクセサーのデフォルトは

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

外半径を関数として指定することは、多くの場合、sqrtスケールと組み合わせて、コームコブグラフや極座標棒グラフを作成するのに役立ちます。より一般的には、パイグラフやドーナツグラフには一定の外半径が使用されます。外半径が内半径より小さい場合、内半径と外半径が入れ替えられます。負の値はゼロとして扱われます。

arc.cornerRadius(radius) ​

例 · ソース · radiusが指定されている場合、角の半径を指定された関数または数値に設定し、このアークジェネレーターを返します。

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

radiusが指定されていない場合、現在の角の半径アクセサーを返します。

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

角の半径アクセサーのデフォルトは

js
function cornerRadius() {
  return 0;
}

角の半径がゼロより大きい場合、アークの角は、指定された半径の円を使用して丸められます。円形の扇形の場合、外側の2つの角が丸められます。環状の扇形の場合、4つの角すべてが丸められます。

角の半径は、（outerRadius - innerRadius）/ 2よりも大きくすることはできません。さらに、角度スパンがπよりも小さいアークの場合、隣接する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はラジアンで指定され、-y（12時）が0で、正の角度は時計回りに進みます。|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はラジアンで指定され、-y（12時）が0で、正の角度は時計回りに進みます。|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 × パディング角度として定義されます。この距離は、円弧の開始と終了から等しく減算されます。円弧が完全な円または環状を形成する場合、つまり |終了角度 - 開始角度| ≥ 2π の場合、パディング角度は無視されます。

内半径または角度スパンがパディング角度に比べて小さい場合、隣接する円弧間で平行なエッジを維持できない可能性があります。この場合、円弧の内側のエッジは、円形の扇形と同様に、点に縮退する可能性があります。このため、パディングは通常、環状セクター（つまり、内半径が正の場合）にのみ適用されます。下の図を参照してください。

パディングを使用する場合の推奨される最小内半径は、外半径 * パディング角度 / sin(θ) です。ここで、θ はパディング前の最小円弧の角度スパンです。たとえば、外半径が 200 ピクセルで、パディング角度が 0.02 ラジアンの場合、妥当な θ は 0.04 ラジアンであり、妥当な内半径は 100 ピクセルです。円弧パディングアニメーションで図解を参照してください。

多くの場合、パディング角度は円弧ジェネレーターに直接設定されるのではなく、パディングされた円弧の面積がその値に比例するように、パイジェネレーターによって計算されます。pie.padAngle を参照してください。図解については、パイパディングアニメーションを参照してください。一定のパディング角度を円弧ジェネレーターに直接適用すると、小さな円弧から不均衡に減算され、歪みが生じる傾向があります。

arc.padRadius(radius) ​

ソース · radius が指定された場合、パディング半径を指定された関数または数値に設定し、この円弧ジェネレーターを返します。radius が指定されていない場合、現在のパディング半径アクセサーを返します。デフォルトは null で、パディング半径が sqrt(内半径 × 内半径 + 外半径 × 外半径) として自動的に計算されることを示します。パディング半径は、隣接する円弧を分離する固定の線形距離を決定し、padRadius × パディング角度として定義されます。

arc.context(context) ​

ソース · context が指定された場合、コンテキストを設定し、この円弧ジェネレーターを返します。

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

context が指定されていない場合、現在のコンテキスト（デフォルトは null）を返します。

js
arc.context() // context

コンテキストが null でない場合、生成された円弧は、パスメソッド呼び出しのシーケンスとしてこのコンテキストにレンダリングされます。それ以外の場合は、生成された円弧を表すパスデータ文字列が返されます。

arc.digits(digits) ​

ソース · digits が指定された場合、小数点以下の最大桁数を設定し、この円弧ジェネレーターを返します。

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

digits が指定されていない場合、現在の小数点以下の最大桁数（デフォルトは 3）を返します。

js
arc.digits() // 3

このオプションは、関連付けられたコンテキストが null の場合にのみ適用されます。これは、この円弧ジェネレーターがパスデータを生成するために使用される場合です。