<!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
>