Open In App

D3.js path.lineTo() Function

Last Updated : 07 Aug, 2020
Comments
Improve
Suggest changes
Like Article
Like
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:


Similar Reads