d3-path

假设你要用2D Canvas画些什么：

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

d3-path模块可以让你精确地绘制到SVG中。它通过将CanvasPathMethods调用序列化为SVG路径数据来实现。例如：

var context = d3.path();
drawCircle(context, 40);
pathElement.setAttribute("d", context.toString());

现在你编写的代码可以同时用于Canvas（性能优先）和SVG（方便优先）了。有关实际示例，请参阅d3-shape。

Installing

如果你使用npm，请键入npm install d3-path。否则，请下载最新版本。你也可以直接从d3js.org加载，作为standalone library（独立库）或D3 4.0的一部分来使用。支持AMD，CommonJS和vanilla环境。在vanilla环境下，会输出一个全局的d3：

<script src="https://d3js.org/d3-path.v1.min.js"></script>
<script>

var path = d3.path();
path.moveTo(1, 2);
path.lineTo(3, 4);
path.closePath();

</script>

API Reference

d3.path()

执行CanvasPathMethods构建一条新的path serializer（路径序列化器）。

path.moveTo(x, y)

移动到给定点⟨x, y⟩，相当于context.moveTo和SVG的“moveto” 命令。

path.closePath()

结束当前子路径并自动绘制一条从当前点到当前子路径的起始点的直线。相当于context.closePath和SVG的“closepath”命令。

path.lineTo(x, y)

绘制一条从当前点到给定点⟨x, y⟩的直线。相当于context.lineTo和SVG的“lineto” 命令。

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

用控制点⟨cpx, cpy⟩绘制一条从当前点到给定点⟨x, y⟩的quadratic Bézier segment（二次贝塞尔曲线段）。相当于context.quadraticCurveTo和SVG的quadratic Bézier curve命令。

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

用控制点⟨cpx1, cpy1⟩ 和⟨cpx2, cpy2⟩绘制一条从当前点到给定点 ⟨x, y⟩的cubic Bézier segment（三次贝塞尔曲线段）。相当于context.bezierCurveTo和SVG的cubic Bézier curve命令。

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

用给定radius画一条弧线段，相切于当前点与 ⟨x1, y1⟩间的直线和点⟨x1, y1⟩与⟨x2, y2⟩间的直线。如果第一个切点不等于当前点，则在当前点和第一个切点间画一条直线。相当于context.arcTo和SVG的elliptical arc curve命令。

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

用给定的圆心⟨x, y⟩、radius、startAngle和endAngle绘制一条圆弧。如果anticlockwise为true，该弧线将按逆时针方向绘制；否则按顺时针方向绘制。如果当前点不等于弧线的起始点，将在当前点与弧线的起始点间画一条直线。相当于context.arc和SVG的elliptical arc curve命令。

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

创建一条只包含 ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩四个点的子路径，并将四个点用直线连接起来，然后闭合该子路径。相当于context.rect和SVG的“lineto”命令。

path.toString()

根据SVG的path data specficiation（路径数据标识）返回此path的字符串形式。

Paths (d3-path)