The path.lineTo() function is used to draw a line to a given point from the current set of points.
Syntax:
path.lineTo(x, y);
Parameters: It takes two parameters as mentioned above and described below.
- x: It is the x-position of the point to which line is to be drawn.
- y: It is the y-position of the point to which line is to be drawn.
Return Value: It does not return any value.
Example 1: Making a line from (0, 0) to (100, 100).
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent=         "width=device-width,initial-scale=1.0">       <script src=     </script>           <style>         h1 {             color: green;         }           svg {             background-color: #f2f2f2;         }           .path2 {             stroke: #000;         }     </style> </head>   <body>     <div>         <h1>neveropen</h1>         <b>D3.js | Path.lineTo() Function</b>         <br><br>         Making a line from (0, 0) to (100, 100) <br>         <svg width="100" height="100">             <path class="path2">         </svg>     </div>           <script>           // Creating a path         var path = d3.path();         path.moveTo(0, 0);                   // Making line to x:100 and y:100         path.lineTo(100, 100);                   // Closing the path         path.closePath();         d3.select(".path2").attr("d", path);     </script> </body>   </html> |
Output:
Example 2: Making a square using lineTo() function.
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" path1tent=         "width=device-width,initial-scale=1.0">       <script src=     </script>       <style>         h1 {             color: green;         }           svg {             background-color: #f2f2f2;         }           .path2 {             stroke: #000;         }     </style> </head>   <body>     <div>         <h1>neveropen</h1>         <b>D3.js | Path.lineTo() Function</b>         <br><br>         Making a square using lineTo() function<br>         <svg width="100" height="100">             <path class="path2">         </svg>     </div>           <script>           // Creating a path         var path = d3.path();         path.moveTo(10, 10);                   // Making line to x:90 and y:10         path.lineTo(90, 10);                   // Closing the path         path.closePath();         path.moveTo(90, 10);                   // Making line to x:90 and y:90         path.lineTo(90, 90);                   // Closing the path         path.closePath();         path.moveTo(90, 90);                   // Making line to x:10 and y:90         path.lineTo(10, 90);                   // Closing the path         path.closePath();         path.moveTo(10, 90);                   // Making line to x:10 and y:10         path.lineTo(10, 10);                   // Closing the path         path.closePath();         d3.select(".path2").attr("d", path);     </script> </body>   </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
