The d3.closePath() function is used to close the current ongoing subpath and is almost the same as SVG's closepath command.
Syntax:
d3.closePath()
Parameters: It does not accept any parameters.
Return Value: It does not return any value.
Example 1:
<!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;
}
.path1,
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.closePath() Function</b>
<br>
Note the difference between
color of both the lines
<br><br>
Without closePath() rest all properties
such as color, size are same <br>
<svg width="100" height="100">
<path class="path1">
</svg> <br>
With closePath() rest all properties
such as color, size are same <br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path1 = d3.path();
path1.moveTo(40, 0);
// Making line to x:0 and y:100
path1.lineTo(40, 100);
d3.select(".path1").attr("d", path1);
// Creating a path
var path1 = d3.path();
path1.moveTo(40, 0);
// Making line to x:0 and y:100
path1.lineTo(40, 100);
// Closing the path
path1.closePath();
d3.select(".path2").attr("d", path1);
</script>
</body>
</html>
Output:
Example 2:
<!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;
}
.path1,
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.closePath() Function</b>
<br><br>
Without closePath() rest all properties
such as color, size are same <br>
<svg width="100" height="100">
<path class="path1">
</svg> <br>
With closePath() rest all properties
such as color, size are same <br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path1 = d3.path();
path1.moveTo(40, 0);
// Making line to x:40 and y:100
path1.lineTo(40, 90);
// Making line to x:80 and y:100
path1.lineTo(80, 90);
d3.select(".path1").attr("d", path1);
// Creating a path
var path1 = d3.path();
path1.moveTo(40, 0);
// Making line to x:40 and y:100
path1.lineTo(40, 90);
// Closing the path
path1.closePath();
// Making line to x:80 and y:100
path1.lineTo(80, 90);
// Closing the path
path1.closePath();
d3.select(".path2").attr("d", path1);
</script>
</body>
</html>
Output:
