The arc.centroid() function is used to compute the midpoint of the centerline of the arc. The midpoint that is generated is calculated using (startAngle+endAngle)/2 and (innerRadius+outerRadius)/2.
Syntax:
arc.centroid(arguments);
Parameters: This function accepts a single parameter as mentioned above and described below.
- arguments: These are the arbitrary arguments.
Return Values: This function return an array containing the points.
Example 1:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport"          content="width=device-width,                    initial-scale=1.0"/>           <!--Fetching from CDN of D3.js -->    <script src=     </script> </head>   <body>     <script>           // Creating an arc         var arc = d3.arc()             .innerRadius(40)             .outerRadius(45)             .startAngle(10)             .endAngle(8);           // arc.centroid function         console.log(arc.centroid());     </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"/>       <!--Fetching from CDN of D3.js -->    <script src=     </script> </head>   <body>     <script>           // Creating an arc         var arc = d3.arc()             .innerRadius(40)             .outerRadius(45)             .startAngle(0)             .endAngle(8);         // arc.centroid function         console.log("Change in start and end angle");         console.log("will change the centroid");         console.log(arc.centroid());     </script> </body>    </html> |
Output:
