D3.js | Path.moveTo() Function - GeeksforGeeks

11 Apr, 2022
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 ="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>
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 ="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>
Output:
arorakashish0911
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?