D3.js arc() Function Last Updated : 31 Aug, 2020 Comments Improve Suggest changes Like Article Like Report 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= "https://d3js.org/d3.v6.min.js"> </script> </head> <body> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> GeeksforGeeks </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= "https://d3js.org/d3.v6.min.js"> </script> </head> <body> <div style="width:300px; height:300px;"> <center> <h1 style="color:green"> GeeksforGeeks </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= "https://d3js.org/d3.v6.min.js"> </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: Comment More infoAdvertise with us Next Article D3.js arc() Function T tarun007 Follow Improve Article Tags : JavaScript Web Technologies D3.js Similar Reads D3.js chord() Function The d3.chord() function in D3.js is used to return a constructed new chord layout with the default settings. Syntax: d3.chord() Parameters: This function does not accept any parameters. Return Value: This function returns the constructed new chord layout. Below programs illustrate the d3.chord() fun 2 min read p5.js arc() Function The arc() function is an inbuilt function in p5.js which is used to draw an arc. This function accepts seven parameters which are x-ordinate, y-ordinate, width, height, start, stop and an optional parameter mode. Syntax: arc(x, y, w, h, start, stop, mode) Parameters: This function accepts seven para 2 min read D3.js arc.endAngle() Function The arc.endAngle() function of D3.js library is used to set the ending angle of the arc. This function sets the end angle to a function or to an integer. Syntax: arc.endAngle([angle]); Parameters: This function accepts a single parameter as mentioned above and described below. angle: This takes a nu 2 min read D3.js arc.padAngle() Function The arc.padAngle() function in D3.js library is used to set the padding angle of the arc to the specified number. This function sets the angle between adjacent arcs for some padded arc. Syntax: arc.padAngle([angle]); Parameters: This function accepts a single parameter as mentioned above and describ 2 min read D3.js arc.centroid() Function 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 abo 1 min read Like