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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。