El método d3.lineRadial.context() le permite representar la línea en el contexto de un elemento de lienzo. La línea se representará en el contexto actual cuando se invoque el generador de línea. Podemos establecer el contexto de nuestra línea por nuestra cuenta usando este método como color, trazo, relleno, etc. El valor predeterminado es nulo.
Sintaxis:
d3.lineRadial.context(_context);
Parámetros:
- _context: contexto establecido por el usuario.
Valor devuelto: este método devuelve el contexto actual.
Ejemplo 1: En este ejemplo, cambiaremos el color y el trazo usando este método.
<!DOCTYPE html>
<html>
<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>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
</body>
<script>
var data = [
{angle: 0, radius: 10},
{angle: 3.14 * .5, radius: 35},
{angle: 3.14 * .75, radius: 55},
{angle: 3.14, radius: 60},
{angle: 3.14 * 1.25, radius: 65},
{angle: 3.14 * 1.5, radius: 70},
{angle: 3.14 * 1.75, radius: 75},
{angle: 3.14 * 2, radius: 80},
{angle: 3.14 * 2.25, radius: 85},
{angle: 3.14 * 2.5, radius: 90},
{angle: 3.14 * 2.75, radius: 95},
{angle: 3.14 * 3, radius: 100},
{angle: 3.14 * 3.25, radius: 105},
{angle: 3.14 * 3.5, radius: 110}
];
var context = d3.select("#gfg").node().getContext("2d");
var lineRadialGenerator = d3.lineRadial()
.angle((d) => d.angle)
.radius((d) => d.radius)
.context(context);
context.translate(100, 100);
lineRadialGenerator(data);
context.strokeStyle = "green";
context.stroke();
</script>
</html>
Producción:
Ejemplo 2: en este ejemplo, cambiaremos de color y rellenaremos con este método.
<!DOCTYPE html>
<html>
<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>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
</body>
<script>
var data = [
{angle: 0, radius: 10},
{angle: 3.14 * .5, radius: 35},
{angle: 3.14 * .75, radius: 55},
{angle: 3.14, radius: 60},
{angle: 3.14 * 1.25, radius: 65},
{angle: 3.14 * 1.5, radius: 70},
{angle: 3.14 * 1.75, radius: 75},
{angle: 3.14 * 2, radius: 80},
{angle: 3.14 * 2.25, radius: 85},
{angle: 3.14 * 2.5, radius: 90},
{angle: 3.14 * 2.75, radius: 95},
{angle: 3.14 * 3, radius: 100},
{angle: 3.14 * 3.25, radius: 105},
{angle: 3.14 * 3.5, radius: 110}
];
var context = d3.select("#gfg").node().getContext("2d");
var lineRadialGenerator = d3.lineRadial()
.angle((d) => d.angle)
.radius((d) => d.radius)
.context(context);
context.translate(100, 100);
lineRadialGenerator(data);
context.fillStyle = "green";
context.fill();
</script>
</html>
Producción:
