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: