Skip to content
Related Articles

Related Articles

Improve Article

D3.js arc.padRadius() Function

  • Last Updated : 09 Jul, 2021
Geek Week

The d3.padRadius() function is used to set the pad radius in the arc. If pad radius is provided then it sets the pad radius to the specified function or number and returns this arc generator.

If radius is not provided then it returns the current pad radius accessor, which is by defaults to null, that indicates the pad radius auto computed as sqrt(innerRadius * innerRadius + outerRadius * outerRadius). The pad radius compute the fixed linear distance separating adjacent arcs, defined as padRadius * padAngle.

Syntax: 

arc.padRadius([radius])

Parameters: This method accepts a single parameter as mentioned above and described below:

  • radius: The value of pad radius.

Return : It returns an arc with specified pad radius.



Example 1:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width,
                initial-scale=1.0"/>
 
 
    <script src=
    </script>
</head>
 
<body>
    <div style="width:300px; height:300px;">
        <center>
           
   
            <h2 style="color:black">
                d3.arcpad()
            </h2
   
        </center>
         
        <svg width="200" height="200">
        </svg>
    </div>
 
    <script>
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,50)");
 
        // padding radius =10
        var arcpad = d3.arc()
            .innerRadius(48)
            .outerRadius(50)
            .padRadius(10)
            .startAngle(90)
            .endAngle(2 * 180);
 
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arcpad)
            .attr("fill","red");
    </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"/>
 
 
    <script src=
    </script>
</head>
 
<body>
    <div style="width:300px; height:300px;">
        <center>
           
   
            <h2 style="color:black">
                d3.arcpad()
            </h2
   
        </center>
         
        <svg width="200" height="200">
        </svg>
    </div>
 
    <script>
        var svg = d3.select("svg")
            .append("g")
            .attr("transform", "translate(150,50)");
 
        // padding radius =5
        var arcpad = d3.arc()
            .innerRadius(48)
            .outerRadius(50)
            .padRadius(5)
            .startAngle(10)
            .endAngle(5);
 
        svg.append("path")
            .attr("class", "arc")
            .attr("d", arcpad)
            .attr("fill","red");
    </script>
</body>
 
</html>

Output :

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :