Paths API
路径用于绘制矩形,圆形,椭圆形,折线,多边形,直线和曲线。 SVG路径表示可以描边,填充,用作剪切路径或三者的任意组合的形状轮廓。 本章详细介绍了Paths API。
配置路径
您可以使用下面的脚本配置Paths API。
<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>
</script>
路径API方法
一些最常用的Paths API方法简要描述如下。
d3.path() - 此方法用于创建新路径。
path.moveTo(x, y) - 此方法用于移动指定的x和y值。
path.closePath() - 此方法用于关闭当前路径。
path.lineTo(x, y) - 此方法用于创建从当前点到定义的x,y值的线。
path.quadraticCurveTo(cpx, cpy, x, y) - 此方法用于绘制从当前点到指定点的二次曲线。
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) - 此方法用于绘制从当前点到指定点的贝塞尔曲线。
path.arcTo(x1, y1, x2, y2, radius) - 此方法用于从当前点到指定点(x1,y1)绘制圆弧并结束指定点(x1,y1)之间的直线和(x2,y2)。
path.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) - 此方法用于将圆弧绘制到指定的中心(x,y),radius,startAngle和endAngle。 如果逆时针值为真,则沿逆时针方向绘制圆弧,否则沿顺时针方向绘制圆弧。
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的路径数据规范返回此路径的字符串表示形式。
例子 (Example)
让我们使用路径API在D3中绘制一条简单的线。 创建一个网页linepath.html并在其中添加以下更改。
<!DOCTYPE html>
<meta charset = "UTF-8">
<head>
<title>SVG path line Generator</title>
</head>
<style>
path {
fill: green;
stroke: #aaa;
}
</style>
<body>
<svg width = "600" height = "100">
<path transform = "translate(200, 0)" />
</svg>
<script src = "https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
var lineGenerator = d3.line();
var pathString = lineGenerator(data);
d3.select('path').attr('d', pathString);
</script>
</body>
</html>
现在,请求浏览器,我们将看到以下结果。