D3.js arc.cornerRadius() Function
Last Updated :
31 Aug, 2020
The arc.cornerRadius() function is used to set the corner radius for rounded corners. If the radius is not specified, returns the current corner radius accessor, which defaults to:
function cornerRadius() {
return 0;
}
Syntax:
arc.cornerRadius([radius]);
Parameters: This function accepts a single parameter as mentioned above and described below.
- radius: This parameter takes a number that decides the radius of the corners.
Return Values: This function returns the arc generator.
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<script src=
</script>
</head>
<body>
<div style="width:300px; height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
arc.cornerRadius()
</h2>
</center>
<svg width="300" height="300">
</svg>
</div>
<script>
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(150,200)");
// An arc generator created
var arc = d3.arc()
.outerRadius(-5)
.innerRadius(150)
.startAngle(0)
// Use of cornerRadius Function
.cornerRadius(6666)
.endAngle(1);
svg.append("path")
.attr("class", "arc")
.attr("d", arc);
let p = document.querySelector(".arc");
p.style.fill="green";
</script>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0"/>
<script src=
</script>
</head>
<body>
<div style="width:300px; height:300px;">
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
arc.cornerRadius()
</h2>
</center>
<svg width="300" height="300">
</svg>
</div>
<script>
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(120,200)");
// An arc generated
var arc = d3.arc()
.outerRadius(140)
.innerRadius(200)
.startAngle(0)
// Use of cornerRadius Function
.cornerRadius(20)
.endAngle(1);
svg.append("path")
.attr("class", "arc")
.attr("d", arc);
let p = document.querySelector(".arc");
p.style.fill="green";
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...