Open In App

D3.js chord.padAngle() Function

Last Updated : 19 Aug, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The chord.padAngle() function in D3.js is used to set the pad angle between adjacent groups to the specified number in radians and returns the chord layout.

Syntax:

chord.padAngle([angle]);

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

  • angle: This parameter is the angle to set the pad angle between adjacent groups.

Return Value: This function returns the chord layout.

Below programs illustrate the chord.padAngle() function in D3.js

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>D3.js | chord.padAngle() Function</title>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.js"></script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksForGeeks</h1>
  
        <h3>D3.js | chord.padAngle() Function</h3>
        <div id="GFG"></div>
  
        <script>
            // Create the svg area
            var svg = d3.select("#GFG")
                .append("svg")
                .attr("width", 340)
                .attr("height", 340)
                .append("g")
                .attr("transform", "translate(170, 170)")
  
            // Create input data
            var data = [[10, 161, 80, 80],
            [13, 990, 9, 69],
            [175, 71, 16, 68],
            [51, 148, 60, 71]];
  
            // Give this matrix to d3.chord()
            var chords = d3.chord()
              
                // Use of chord.padAngle() Function
                .padAngle(0.5)
                (data)
  
            svg.datum(chords)
                .append("g")
                .selectAll("g")
                .data(function (d) { return d.groups; })
                .enter()
                .append("g")
                .append("path")
                .style("fill", "black")
                .style("stroke", "black")
                .attr("d", d3.arc()
                    .innerRadius(150)
                    .outerRadius(160)
                )
  
            svg.datum(chords)
                .append("g")
                .selectAll("path")
                .data(function (d) { return d; })
                .enter()
                .append("path")
                .attr("d", d3.ribbon()
                    .radius(150)
                )
                .style("fill", "#58b54a")
                .style("stroke", "black");
        </script>
    </center>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>D3.js | chord.padAngle() Function</title>
    <meta charset="utf-8">
  
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-color.v1.min.js">
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksForGeeks</h1>
  
        <h3>D3.js | chord.padAngle() Function</h3>
        <div id="GFG"></div>
  
        <script>
            // Create the svg area
            var svg = d3.select("#GFG")
                .append("svg")
                .attr("width", 340)
                .attr("height", 340)
                .append("g")
                .attr("transform", "translate(170, 170)")
  
            // Create input data
            var data = [[0, 71, 89, 68],
            [11, 0, 60, 71],
            [10, 145, 0, 85],
            [13, 9, 9, 0]];
  
            // 4 groups, so create a vector of 4 colors
            var colors = [d3.schemeDark2[4], d3.schemeDark2[5],
            d3.schemeDark2[6], d3.schemeDark2[7]];
  
            // Give this matrix to d3.chord()
            var chords = d3.chord()
  
                // Use of chord.padAngle() Function
                .padAngle(0.3)
                .sortSubgroups(d3.ascending)
                (data)
  
            svg.datum(chords)
                .append("g")
                .selectAll("g")
                .data(function (d) { return d.groups; })
                .enter()
                .append("g")
                .append("path")
                .style("fill", function (d, i) {
                    return colors[i]
                })
                .style("stroke", "black")
                .attr("d", d3.arc()
                    .innerRadius(150)
                    .outerRadius(160)
                )
  
            svg.datum(chords)
                .append("g")
                .selectAll("path")
                .data(function (d) { return d; })
                .enter()
                .append("path")
                .attr("d", d3.ribbon()
                    .radius(150)
                )
                .style("fill", function (d) {
                    return (colors[d.source.index])
                })
                .style("stroke", "black");
        </script>
    </center>
</body>
  
</html>


Output:



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads