D3.js-Shapes API

この章では、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;
}

（x）arc.padRadius（[radius]）-このメソッドは、パッド半径を指定された半径から指定された関数に設定するために使用されます。パッド半径は、padRadius * padAngleとして定義される、隣接する円弧を分離する固定線形距離を決定します。
（xi）arc.context（[context]）-このメソッドは、コンテキストを設定し、アークジェネレータを返すために使用されます。

Pies API

このAPIは、パイジェネレーターの作成に使用されます。前の章でこれらのAPIメソッドを実行しました。これらすべての方法について詳しく説明します。

* d3.pie（）*-デフォルト設定で新しいパイジェネレータを構築します。
* pie（data [、arguments]）*-このメソッドは、指定された配列値のパイを生成するために使用されます。オブジェクトの配列を返します。オブジェクトはデータムの円弧角度です。各オブジェクトには、次のプロパティがあります-
data -入力データ;入力データ配列内の対応する要素。
値-アークの数値。
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); }
);

ここで、比較関数は2つの引数「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]）*-このメソッドは、放射状の線を描画するために使用され、アクセサーは半径を返します。 origin（0,0）からの距離を取ります。

次の章では、D3.jsのColors APIについて学びます。

D3js-shapes-api

目次