Skip to content
Related Articles
Open in App
Not now

Related Articles

D3.js arc.endAngle() Function

Improve Article
Save Article
Like Article
  • Last Updated : 23 Sep, 2020
Improve Article
Save Article
Like Article

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
        "https://d3js.org/d3.v6.min.js"
        </script>
    </head>
    <body
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </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
        "https://d3js.org/d3.v6.min.js"
        </script>
    </head>
    <body
        <div style="width:300px; height:300px;">
            <center>
                <h1 style="color:green">
                    GeeksforGeeks
                </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:


My Personal Notes arrow_drop_up
Like Article
Save Article
Related Articles

Start Your Coding Journey Now!