D3.js lineRadial() Method - GeeksforGeeks

23 Aug, 2020
The d3.lineRadial() method is used to constructs a new Radial line generator with the default settings. The Radial line generator is then used to make a Radial line.
Syntax:
d3.lineRadial();
Parameters: This method does not accept any parameters.
Return Value: This method returns a Radial line Generator.
Example 1: The following example makes a Radial curve line using this method.
HTML
<!DOCTYPE html><html>  <head>    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">    </script>      <script src="https://d3js.org/d3.v4.min.js">    </script></head>  <body>    <h1 style="text-align:center;color: green;">        GeeksforGeeks    </h1>    <center>        <svg id="gfg" width="200" height="200">            <g transform="translate(100, 100)"></g>        </svg>    </center>      <script>        var lineRadialGenerator = d3.lineRadial();        var data = [            [0, 10],            [3.14 * .5, 35],            [3.14 * .75, 55],            [3.14, 60],            [3.14 * 1.25, 65],            [3.14 * 1.5, 70],            [3.14 * 1.75, 75],            [3.14 * 2, 80],            [3.14 * 2.25, 85],            [3.14 * 2.5, 90],            [3.14 * 2.75, 95],            [3.14 * 3, 100],            [3.14 * 3.25, 105],            [3.14 * 3.5, 110]];          var a = lineRadialGenerator(data);          d3.select("#gfg")            .select("g")            .append("path")            .attr("d", a)            .attr("fill", "none")            .attr("stroke", "green");    </script></body>  </html>
Output:
Example 2:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">    </script>    <script src=        "https://d3js.org/d3.v4.min.js">    </script></head>  <body>    <h1 style="text-align:center; color:green;">        GeeksforGeeks</h1>    <center>        <svg id="gfg" width="200" height="200">            <g transform="translate(100, 100)"></g>        </svg>    </center>      <script>        var lineRadialGenerator = d3.lineRadial();        var data = [            [0, 80],            [Math.PI * 0.25, 80],            [Math.PI * 0.5, 80],            [Math.PI * 0.75, 80],            [Math.PI, 80],            [Math.PI * 1.25, 80],            [Math.PI * 1.5, 80],            [Math.PI * 1.75, 80],            [Math.PI * 2, 80]        ];        var a = lineRadialGenerator(data);          d3.select("#gfg")            .select("g")            .append("path")            .attr("d", a)            .attr("fill", "none")            .attr("stroke", "green");    </script></body>  </html>
Output:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to detect browser or tab closing in JavaScript ?
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?