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:
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" path1tent =
"width=device-width,initial-scale=1.0" >
</ 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:
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;
}
.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: