作成者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の3つの引数が渡されます。

valueが指定されていない場合、現在の値アクセサを返します。

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

値アクセサのデフォルトは次のとおりです。

js
function value(d) {
  return d;
}

デフォルトの値アクセサは、入力データが数値であるか、valueOfを使用して数値に変換できることを想定しています。データが数値でない場合は、特定のデータムに対応する数値を返すアクセサを指定する必要があります。たとえば、numberフィールドとnameフィールドを持つCSVファイルの場合

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));

データコンパレータは、2つの引数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);

値コンパレータはデータコンパレータと似ていますが、2つの引数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コンテキストが渡されます。

angleが指定されていない場合、現在の開始角度アクセサを返します。

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

開始角度アクセサのデフォルトは次のとおりです。

js
function startAngle() {
  return 0;
}

角度はラジアンで表され、0は-y（12時）にあり、正の角度は時計回りに進みます。

pie.endAngle(angle) ​

ソースコード · angleが指定されている場合、円グラフの全体の終了角度を指定された関数または数値に設定し、この円グラフジェネレータを返します。

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

ここの終了角度は、円グラフの全体の終了角度、つまり最後の円弧の終了角度を意味します。通常は定数で表されますが、データの関数として表すこともできます。関数の場合は、終了角度アクセサは一度呼び出され、円グラフジェネレータと同じ引数とthisコンテキストが渡されます。

angleが指定されていない場合、現在の終了角度アクセサを返します。

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

終了角度アクセサのデフォルトは次のとおりです。

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

角度はラジアン単位で表され、0 は -y（12 時）に位置し、正の角度は時計回りに増加します。終端角度の値は startAngle ± τ の範囲内に制限され、|endAngle - startAngle| ≤ τ となります。

pie.padAngle(angle) ​

例 · ソースコード · angle が指定されている場合、パッド角を指定された関数または数値に設定し、この pie ジェネレーターを返します。

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

パッド角は、隣接する円弧間の角度の分離をラジアン単位で指定します。パディングの総量は、指定されたangle に入力データ配列の要素数を掛けた値になり、最大で|endAngle - startAngle|となります。残りのスペースは value によって比例配分され、各円弧の相対面積が維持されます。

パッド角は通常定数で表されますが、データの関数として表すこともできます。関数の場合は、パッド角アクセサーが1回呼び出され、pie ジェネレーター と同じ引数とthisコンテキストが渡されます。

angle が指定されていない場合、現在のパッド角アクセサーを返します。

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

パッド角アクセサーのデフォルトは

js
function padAngle() {
  return 0;
}