Open In App

D3.js | Path.moveTo() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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




<!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 | Path.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>


Output:

Example 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 | Path.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>


Output:



Last Updated : 11 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads