D3.js-Shapes API

この章では、D3.jsのさまざまなシェイプジェネレーターについて説明します。

APIの構成

次のスクリプトを使用して、ShapesAPIを構成できます。

<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メソッドは、前の円グラフの章で使用しました。さまざまなArcsAPIメソッドについて詳しく理解しましょう。

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]) −このメソッドは、コンテキストを設定し、アークジェネレーターを返すために使用されます。

パイAPI

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

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

ここで、compare関数は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メソッドをGraphs章。それぞれの方法を詳しく見ていきましょう。

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])−このメソッドは放射状の線を引くために使用され、アクセサは半径を返します。原点（0,0）からの距離がかかります。

次の章では、D3.jsのColorsAPIについて学習します。