D3.js lineRadial() Method
Last Updated :
30 Mar, 2023
The d3.lineRadial() method is used to construct 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="
</ script >
< script src="
</ 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="
</ script >
< script src =
</ 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:
Share your thoughts in the comments
Please Login to comment...