The d3.bezierCurveTo() function in d3.js is used to draw the cubic-bezier segment to a certain point from the current given point via certain control points.
Syntax:
path.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
Parameters: This function takes the following parameters.
- cpx1: It is the x1-coordinate of the bezier control point.
- cpy1: It is the y1-coordinate of the bezier control point.
- cpx2: It is the x2-coordinate of the bezier control point.
- cpy2: It is the y2-coordinate of the bezier control point.
- x: It is the x-coordinate of the endpoints.
- y: It is the y-coordinate of the endpoint.
Return Value: This function 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;
}
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.bezierCurveTo() Function</b>
<br><br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path = d3.path();
path.moveTo(10, 10);
path.bezierCurveTo(95, 10, 50, 90, 10, 10)
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</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;
}
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.bezierCurveTo() Function</b>
<br><br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path = d3.path();
path.moveTo(10, 10);
path.bezierCurveTo(95, 10, 50, 90, 10, 10)
// Closing the path
path.closePath();
path.bezierCurveTo(90, 10, 15, 110, 10, 10)
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</script>
</body>
</html>
Output:
