D3.js |小路

D3.js主要用于制作图形和可视化 HTML SVG 元素上的数据。 D3 在某种程度上与数据驱动文档有关。 Path用于使 SVG ， Path 创建一个对象，该对象具有 canvas PATH 的所有属性。该库还能够绘制模拟、2D 图形和 3D 图形。投影也是该库的内置功能。

句法：

path.

参数：有 是 不需要参数或参数。

返回：此 Path 返回一个与 HTML canvas 提供的 path 方法相同的对象。

示例 1：

HTML

   
      
      
      D3.js| Path
   
   
      body {
          text-align: center;
      }
      h1 {
          color: green;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      GeeksforGeeks
      D3.js|Path
      
         
            
         
      
      
      
         var path = d3.path();
           
         // Starting points are x:10 and y:10
         path.moveTo(10, 10); 
           
         // Making line to points x:200 and y:200
         path.lineTo(200, 200); 
         d3.select(".path1").attr("d",path)
      
   

输出：

示例 2：

HTML

   
      
      
      D3.js| Path
   
   
      body {
          text-align: center;
      }
      h1 {
          color: green;
      }
      svg{
      background-color: green;
      }
      .path1{
      fill: aliceblue;
      }
   
   
      GeeksforGeeks
      D3.js|Path
      
         
            
         
      
      
      
         var path = d3.path();
         // Point start at x:10 y:10
         path.moveTo(10, 10);  
           
         // Making line to x:10 y:200
         path.lineTo(10, 200); 
           
         // Point start at x:10 y:10
         path.moveTo(10, 200); 
           
         // Making line to x:200 y:200
         path.lineTo(200, 200); 
           
         // Point start at x:200 y:200
         path.moveTo(200, 200); 
           
         // Making line to x:200 y:10
         path.lineTo(200, 10);
           
         // Point start at x:200 y:10
         path.moveTo(200, 10); 
           
         // Making line to x:10 y:10
         path.lineTo(10, 10);  
         d3.select(".path1").attr("d",path)
      
   

输出：