Categories
D3.js教程

D3.js-路径API

D3.js-路径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,半径) -此方法用于绘制从当前点到指定点(x1,y1)的圆弧并在指定点(x1,y1)之间结束线和(x2,y2)。

  • path.arc(x,y,radius,startAngle,endAngle [,逆时针]) -此方法用于将圆弧绘制到指定的中心(x,y),radius,startAngle和endAngle。如果逆时针值为true,则沿逆时针方向绘制弧,否则沿顺时针方向绘制弧。

  • 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并在其中添加以下更改。

<meta charset="UTF-8">
   
      <title>SVG path line Generator</title>
   

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   
      <svg width="600" height="100">
         <path transform="translate(200, 0)"></path>
      </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>
   

现在,请求浏览器,我们将看到以下结果。

error: 内容受到保护 !!