Related Articles

Related Articles

D3.js | Path.moveTo() Function
  • Last Updated : 22 Jun, 2020

D3.js is mostly used for making of graph and visualizing data on the HTML svg elements. D3 somehow is related to Data Driven Documents. The Path.moveTo() function is used to move a point inside the svg element. This library is also capable enough to draw simulations, 2D graphs and 3D graphs and used for producing dynamic, interactive data visualizations. It makes use of Scalable Vector Graphics i.e SVG elements. This library mostly works with svg vectors. 

Syntax:

Path.moveTo(x,y)

Parameters: This function accepts two parameter as mentioned above and described below:

  • X: This parameter the x-position of the element.
  • Y: This parameter the y-position of the element.

Below example illustrate the Path.moveTo() function in D3.js:

Example 1:



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 =
        </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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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
        </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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :