Open In App

D3.js path.lineTo() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        "https://d3js.org/d3.v4.min.js">
    </script>
      
    <style>
        h1 {
            color: green;
        }
  
        svg {
            background-color: #f2f2f2;
        }
  
        .path2 {
            stroke: #000;
        }
    </style>
</head>
  
<body>
    <div>
        <h1>GeeksforGeeks</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=
        "https://d3js.org/d3.v4.min.js">
    </script>
  
    <style>
        h1 {
            color: green;
        }
  
        svg {
            background-color: #f2f2f2;
        }
  
        .path2 {
            stroke: #000;
        }
    </style>
</head>
  
<body>
    <div>
        <h1>GeeksforGeeks</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:



Last Updated : 07 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads