D3.js | Path.moveTo()函数

D3.js主要用于制作图形和可视化 HTML svg 元素上的数据。 D3 在某种程度上与数据驱动文档有关。 Path.moveTo()函数用于在 svg 元素内移动一个点。该库还能够绘制模拟、2D 图形和 3D 图形，并用于生成动态、交互式数据可视化。它利用可缩放矢量图形，即 SVG 元素。这个库主要使用svg 向量。

句法：

Path.moveTo(x,y)

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

• X：此参数是元素的 x 位置。
• Y：此参数为元素的 y 位置。

下面的示例说明了D3.js中的Path.moveTo()函数：

示例 1：

Javascript

   
      
      
      Document
   
   
      h1 {
          color: green;
      }
      div {
          display: inline-block;
      }
      svg{
          background-color: #f2f2f2;
      }
      .path1{
          stroke: #000;
      }
      .path2{
          stroke: green;
      }
      .path3{
          stroke: #000;
      }
   
   
      
        
           GeeksforGeeks
           D3.js | Path.moveTo() Function
           
           
              
           
     
           
              
           
 
           
              
           
        
        
        
        ;
           // Creating a path
           var path1= d3.path();
               path1.moveTo(0, 0);
                
               // Making line to x:0 and y:100
               path1.lineTo(0, 100);
                
               // Closing the path
               path1.closePath();
           d3.select(".path1").attr("d",path1);
           var path2= d3.path();
            
               // Start point are x:20 and y:20
               path2.moveTo(20, 20);
               path2.lineTo(20, 100);
               path2.closePath();
           d3.select(".path2").attr("d",path2);
           var path3= d3.path();
           
               // Start point are  x:40 and y:20
               path3.moveTo(40,20);
               path3.lineTo(40, 100);
               path3.closePath();
           d3.select(".path3").attr("d",path3);
        
      
   

输出：

示例 2：

HTML

   
      
      
      Document
   
   
      h1 {
          color: green;
      }
      div {
          display: inline-block;
      }
      svg{
          background-color: #f2f2f2;
      }
      .path1{
          stroke: #000;
      }
      .path2{
          stroke: green;
      }
      .path3{
          stroke: #000;
      }
   
   
      
        
           GeeksforGeeks
           D3.js | Path.moveTo() Function
           
            
              
            
            
              
            
            
              
            
        
        
        
        ;
          // Creating a path
          var path1= d3.path();
           
              // Start point are x:0 y:0
              path1.moveTo(0, 0);
               
              // Making line to x:50 and y:50
              path1.lineTo(50, 50);
               
              // Closing the path
              path1.closePath();
          d3.select(".path1").attr("d",path1);
          var path2= d3.path();
           
              // Start point are x:0 and y:100
              path2.moveTo(0, 100);
              path2.lineTo(50, 50);
              path2.closePath();
          d3.select(".path2").attr("d",path2);
          var path3= d3.path();
               
              // Start point are  x:100 and y:100
              path3.moveTo(100,100);
              path3.lineTo(50, 50);
              path3.closePath();
          d3.select(".path3").attr("d",path3);
        
      
   

输出：