路径用于绘制矩形,圆形,椭圆形,折线,多边形,直线和曲线. SVG路径表示可以描边,填充,用作剪切路径或三者的任意组合的形状轮廓.本章详细介绍了Paths API.
您可以使用下面的脚本配置Paths API.
< script src ="https://d3js.org/d3-path.v1.min.js"></script> < script> </script>
一些最常用的路径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),半径,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的路径数据规范返回此路径的字符串表示形式.
让我们使用路径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>
现在,请求浏览器,我们会看到以下结果.