The ribbon.startAngle() function in D3.js is used to set the start angle accessor to the specified function and returns this ribbon generator.
Syntax:
ribbon.startAngle([angle]);
Parameters: This function accepts a single parameter as mentioned above and described below
- angle: This parameter is the radians value to set the start angle accessor.
Return Value: This function returns the ribbon generator.
Below programs illustrate the ribbon.startAngle() function in D3.js
Example 1:
<!DOCTYPE html> <html>    <head>     <meta charset="utf-8"> </head>    <body>     <center>         <h1 style="color:green;">GeeksForGeeks</h1>                      <h3>D3.js | ribbon.startAngle() Function</h3>         <div id="GFG"></div>                    <script>             // Create the svg area             var svg = d3.select("#GFG")                 .append("svg")                 .attr("width", 300)                 .attr("height", 300)                 .append("g")                 .attr("transform", "translate(150, 150)")                                        // Create input data             var data = [[18, 6, 1, 4, 5, 1],                 [ 0, 80, 0, 2, 34, 53],                 [75, 16, 8, 0, 0, 3],                 [3, 9, 9, 6, 35, 4],                 [1, 0, 7, 3, 5, 1]];                                         // Give this matrix to d3.chord()             var chords = d3.chord()                 .padAngle(0.2)                 .sortSubgroups(d3.ascending)                 .sortChords(d3.ascending)                 (data)                                var ribboon = d3.ribbon().radius(140)                                    // Use of ribbon.startAngle() function                 .startAngle(2.2);                            svg.datum(chords)                 .append("g")                 .selectAll("path")                 .data(function (d) { return d; })                 .enter()                 .append("path")                 .attr("d", ribboon)                 .style("fill", "#57beff")                 .style("stroke", "black");         </script>     </center> </body>    </html> |
Output:
Example 2:
<!DOCTYPE html> <html>          <head>     <meta charset="utf-8">           </script>      <script src=     </script>      <script src=     </script> </head>     <body>     <center>         <h1 style="color:green;">GeeksForGeeks</h1>                       <h3>D3.js | ribbon.startAngle() Function</h3>         <div id="GFG"></div>                     <script>             // Create the svg area             var svg = d3.select("#GFG")                 .append("svg")                 .attr("width", 320)                 .attr("height", 320)                 .append("g")                 .attr("transform", "translate(160, 160)")                                 // Create input data             var data = [[0, 249, 747, 555, 373],                         [77, 0, 451, 33, 998],                         [108, 809, 253, 40, 89],                         [453, 592, 748, 477, 423],                         [672, 66, 8, 2, 31]];                             // 4 groups, so create a vector of 4 colors             var colors = [d3.schemeSet2[0], d3.schemeSet2[1],                 d3.schemeSet2[2], d3.schemeSet2[3],                 d3.schemeSet2[4], d3.schemeSet2[5],                 d3.schemeSet2[6], d3.schemeSet2[7]];                 // Give this matrix to d3.chord()             var chords = d3.chord()                 .padAngle(0.175)                 .sortSubgroups(d3.ascending)                 (data)                           var rib = d3.ribbon().radius(150)                                   // Use of ribbon.startAngle() function                 .startAngle(0.2);                               svg.datum(chords)                 .append("g")                 .selectAll("path")                 .data(function (d) { return d; })                 .enter()                 .append("path")                 .attr("d", rib)                 .style("fill", function (d) {                     return (colors[d.source.index])                 })                 .style("stroke", "black");         </script>     </center> </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!
