The d3.arc() function is used to generate an arc generator that produce a circular chart. It is based on the difference between the start angle and the end angle.
Syntax:
d3.arc();
Parameters: This function does not accept any parameters.
Return Values: This function returns an arc generator function.
Below examples illustrate the d3.arc() function in D3.js:
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> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> neveropen </h1> <h2> d3.arc() </h2> </center> <svg width="300" height="300"> </svg> </div> <script> var svg = d3.select("svg") .append("g") .attr("transform", "translate(150,50)"); // Function is used var arc = d3.arc() .innerRadius(40) .outerRadius(45) .startAngle(100) .endAngle(2 * 180); svg.append("path") .attr("class", "arc") .attr("d", arc) .attr("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"/> <!--Fetching from CDN of D3.js --> <script src= </script> </head> <body> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> neveropen </h1> <h2>d3.arc()</h2> </center> <svg width="300" height="300"> </svg> </div> <script> var svg = d3.select("svg") .append("g") .attr("transform", "translate(150,50)"); // An arc will be created var arc = d3.arc() .innerRadius(40) .outerRadius(45) .startAngle(10) .endAngle(8); svg.append("path") .attr("class", "arc") .attr("d", arc) .attr("fill","green"); </script> </body> </html> |
Output:
Example 3:
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> var svg = d3.select("svg") .append("g") .attr("transform", "translate(150,50)"); // An arc generator is produced var arc = d3.arc() .innerRadius(40) .outerRadius(45) .startAngle(10) .endAngle(8); let arr=arc().split(","); arr.forEach((e,i)=>{ console.log(i,e); }) </script> </body> </html> |
Output:
