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 number that corresponds to the end angle of the arc.
Return Values: This function does not return anything.
Below given are a few examples of the function given above.
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 > arc.endAngle() </ h2 > </ center > < svg width = "300" height = "300" > </ svg > </ div > < script > var svg = d3.select("svg") .append("g") .attr("transform", "translate(120, 100)"); // An arc will be produced var arc = d3.arc() .outerRadius(80) .innerRadius(90) .startAngle(0) // Use of arc.endAngle() Function .endAngle(2*2); 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"/> <!--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 > arc.endAngle() </ h2 > </ center > < svg width = "300" height = "300" > </ svg > </ div > < script > var svg = d3.select("svg") .append("g") .attr("transform", "translate(150, 100)"); // An arc will be produced var arc = d3.arc() .outerRadius(-1) .innerRadius(90) .startAngle(0) // Use of arc.endAngle() Function .endAngle(2*2.5); svg.append("path") .attr("class", "arc") .attr("d", arc); let p = document.querySelector(".arc"); p.style.fill="green"; </ script > </ body > </ html > |
Output: