作成者Observable

外観

d3-path ​

例 2Dキャンバスに描画するコードがあるとします。

js
function drawCircle(context, radius) {
  context.moveTo(radius, 0);
  context.arc(0, 0, radius, 0, 2 * Math.PI);
}

d3-pathモジュールを使用すると、このコードをそのまま使用してSVGにもレンダリングできます。シリアライズによってCanvasPathMethodsの呼び出しをSVGパスデータに変換します。例えば

js
const path = d3.path();
drawCircle(path, 40);
path.toString(); // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0"

一度書いたコードは、Canvas（パフォーマンスのため）とSVG（利便性のため）の両方で使用できます。実践的な例については、d3-shapeを参照してください。

path() ​

ソース CanvasPathMethodsを実装する新しいパスシリアライザを構築します。

path.moveTo(x, y) ​

ソース 指定された点⟨x, y⟩に移動します。context.moveToおよびSVGの“moveto”コマンドに相当します。

js
path.moveTo(100, 100);

path.closePath() ​

ソース 現在のサブパスを終了し、現在の点から現在のサブパスの最初の点まで自動的に直線が引かれます。context.closePathおよびSVGの“closepath”コマンドに相当します。

js
path.closePath();

path.lineTo(x, y) ​

ソース 現在の点から指定された点⟨x, y⟩まで直線を引きます。context.lineToおよびSVGの“lineto”コマンドに相当します。

js
path.lineTo(200, 200);

path.quadraticCurveTo(cpx, cpy, x, y) ​

ソース 指定された制御点⟨cpx, cpy⟩を使用して、現在の点から指定された点⟨x, y⟩まで2次ベジェセグメントを描画します。context.quadraticCurveToおよびSVGの2次ベジェ曲線コマンドに相当します。

js
path.quadraticCurveTo(200, 0, 200, 200);

path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) ​

ソース 指定された制御点⟨cpx1, cpy1⟩と⟨cpx2, cpy2⟩を使用して、現在の点から指定された点⟨x, y⟩まで3次ベジェセグメントを描画します。context.bezierCurveToおよびSVGの3次ベジェ曲線コマンドに相当します。

js
path.bezierCurveTo(200, 0, 0, 200, 200, 200);

path.arcTo(x1, y1, x2, y2, radius) ​

ソース 指定されたradiusで円弧セグメントを描画します。これは、現在の点と指定された点⟨x1, y1⟩間の線に接し、指定された点⟨x1, y1⟩と⟨x2, y2⟩間の線に接して終わる円弧です。最初の接点が現在の点と等しくない場合、現在の点と最初の接点の間に直線が引かれます。context.arcToに相当し、SVGの楕円弧曲線コマンドを使用します。

js
path.arcTo(150, 150, 300, 10, 40);

path.arc(x, y, radius, startAngle, endAngle, anticlockwise) ​

ソース 指定された中心⟨x, y⟩、radius、startAngle、endAngleで円弧セグメントを描画します。anticlockwiseがtrueの場合、円弧は反時計回りに描画されます。それ以外の場合は時計回りに描画されます。現在の点が円弧の始点と等しくない場合、現在の点から円弧の始点まで直線が引かれます。context.arcに相当し、SVGの楕円弧曲線コマンドを使用します。

js
path.arc(80, 80, 70, 0, Math.PI * 2);

path.rect(x, y, w, h) ​

ソース ⟨x, y⟩、⟨x + w, y⟩、⟨x + w, y + h⟩、⟨x, y + h⟩の4点のみを含む新しいサブパスを作成し、これらの4点を直線で接続し、サブパスを閉じます。context.rectに相当し、SVGの“lineto”コマンドを使用します。

js
path.rect(10, 10, 140, 140);

path.toString() ​

ソース SVGのパスデータ仕様に従って、このpathの文字列表現を返します。

js
path.toString() // "M40,0A40,40,0,1,1,-40,0A40,40,0,1,1,40,0"

pathRound(digits = 3) ​

ソース pathと同様ですが、小数点以下の桁数を指定されたdigitsの数に制限します。生成されたSVGパスデータのサイズを小さくするのに役立ちます。

js
const path = d3.pathRound(3);