d3.js Path.moveTo()用法及代码示例

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

用法:

Path.moveTo(x,y)

参数：该函数接受上面提到并在下面描述的两个参数：

X:此参数为元素的x-position。
Y:此参数为元素的y-position。

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

范例1：

Javascript

<!DOCTYPE html> 
<html lang="en"> 
   <head> 
      <meta charset="UTF-8"> 
      <meta name="viewport" 
            path1tent="width=device-width,  
                       initial-scale=1.0"> 
      <title>Document</title> 
   </head> 
   <style> 
      h1 { 
          color:green; 
      } 
      div { 
          display:inline-block; 
      } 
      svg{ 
          background-color: #f2f2f2; 
      } 
      .path1{ 
          stroke: #000; 
      } 
      .path2{ 
          stroke:green; 
      } 
      .path3{ 
          stroke: #000; 
      } 
   </style> 
   <body> 
      <center> 
        <div> 
           <h1>GeeksforGeeks</h1> 
           <b>D3.js | Pathe.moveTo() Function</b> 
           <br> 
           <svg width="100" height="100"> 
              <path class="path1"> 
           </svg> 
      
           <svg width="100" height="100"> 
              <path class="path2"> 
           </svg> 
  
           <svg width="100" height="100"> 
              <path class="path3"> 
           </svg> 
        </div> 
        <script src = 
"https://d3js.org/d3.v4.min.js"> 
        </script> 
        <script>; 
           // 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); 
        </script> 
      </center> 
   </body> 
</html>

输出：

范例2：

HTML

<!DOCTYPE html> 
<html lang="en"> 
   <head> 
      <meta charset="UTF-8"> 
      <meta name="viewport" 
            path1tent="width=device-width,  
                       initial-scale=1.0"> 
      <title>Document</title> 
   </head> 
   <style> 
      h1 { 
          color:green; 
      } 
      div { 
          display:inline-block; 
      } 
      svg{ 
          background-color:#f2f2f2; 
      } 
      .path1{ 
          stroke:#000; 
      } 
      .path2{ 
          stroke:green; 
      } 
      .path3{ 
          stroke:#000; 
      } 
   </style> 
   <body> 
      <center> 
        <div> 
           <h1>GeeksforGeeks</h1> 
           <b>D3.js | Pathe.moveTo() Function</b> 
           <br> 
            <svg width="100" height="100"> 
              <path class="path1"> 
            </svg> 
            <svg width="100" height="100"> 
              <path class="path2"> 
            </svg> 
            <svg width="100" height="100"> 
              <path class="path3"> 
            </svg> 
        </div> 
        <script src =  
"https://d3js.org/d3.v4.min.js"> 
        </script> 
        <script>; 
          // 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); 
        </script> 
      </center> 
   </body> 
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 D3.js | Path.moveTo() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。