D3.js | Path.arc()函数

D3.js主要用于制作图形和可视化 HTML SVG 元素上的数据。 D3.js 有很多函数，其中之一是arc()函数。 Path.arc()函数用于制作圆弧和圆等形状。 D3 代表数据驱动文档，主要用于数据可视化。

句法：

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

参数：该函数接受上面提到的五个参数，如下所述：

• x ：此参数保存 SVG 中弧的 x 位置。
• y ：此参数保存弧在 SVG 中的 y 位置。
• radius ：此参数保存要制作的弧的半径。
• startAngle ：此参数保存圆弧的起始角度。
• endAngle[逆时针] ：该参数保存弧的角度，如果逆时针为真，则以逆时针方向绘制弧。

注意：如果当前点不等于圆弧起点，则从当前点到圆弧起点画一条直线。

下面的例子说明了D3.js | D3.js 中的Path.arc()函数：

示例 1：

HTML

   
      
      
      D3.js| Path.arc() Function
   
   
      body {
          text-align: center;
      }
      h1 {
          color: green;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      GeeksforGeeks
      D3.js | Path.arc() Function
       
         
            
                SVG Element
            
            
         
      
      
      
      
         // Creating path object
         var path1= d3.path();
           
         // Creating arc of radius 100
         path1.arc(150,150,100,0,3.14)
         d3.select(".path1").attr("d",path1);
      
   

输出：

示例 2：

HTML

   
      
      
      D3.js| Path.arc() Function
   
   
      body {
          text-align: center;
      }
      h1 {
          color: green;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      GeeksforGeeks
      D3.js | Path.arc() Function
       
         
            
                SVG Element
            
            
         
      
      
      
      
         // Creating path object
         var path1= d3.path();
           
         // Creating arc of radius 100
         path1.arc(150,150,100,0,2*3.14)
         d3.select(".path1").attr("d",path1);
      
   

输出：