El método d3.lineRadial() se utiliza para construir un nuevo generador de líneas radiales con la configuración predeterminada. El generador de líneas Radial se usa luego para hacer una línea Radial.
Sintaxis:
d3.lineRadial();
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve un generador de líneas radiales.
Ejemplo 1: El siguiente ejemplo crea una línea de curva radial usando este método.
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>
Producción:
Ejemplo 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>
Producción:
