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 :
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
