El método areaRadial.context() en D3.js le permite especificar el contexto del elemento del lienzo en el que se representará el área radial. El área radial se representará en el contexto actual cuando se invoque el generador. Podemos establecer el contexto del área por nuestra cuenta usando este método como color, trazo, relleno, etc. El valor predeterminado es nulo.
Sintaxis:
d3.areaRadial.context( _context )
Parámetros:
- _context: Es el contexto establecido por el usuario.
Valor devuelto: este método devuelve el contexto actual.
A continuación se muestran algunos ejemplos del método areaRadial.context() en D3.js:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
D3.js | areaRadial.context() Method
</h3>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
<script>
var points = [
{ x: 0, y: 0 },
{ x: 2, y: 3 },
{ x: 4, y: 1 },
{ x: 6, y: 8 },
{ x: 8, y: 17 },
{ x: 10, y: 15 },
{ x: 12, y: 20 }];
// Get the context
var context = d3.select("#gfg")
.node()
.getContext("2d");
var xScale = d3.scaleLinear()
.domain([0, 6])
.range([0, 2 * Math.PI]);
var yScale = d3.scaleLinear()
.domain([0, 20])
.range([90, 30]);
var Gen = d3.areaRadial()
.angle(d => xScale(d.x / 2))
.innerRadius(d => yScale(d.y) / 2)
.outerRadius(d => yScale(d.y))
// Specify the context
// to be used
.context(context);
context.translate(100, 100);
Gen(points);
context.strokeStyle = "black";
context.fillStyle = "green";
context.fill();
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<h3 style="text-align: center;">
D3.js | areaRadial.context() Method
</h3>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
<script>
var data = [
{ x: 10, y: 1 },
{ x: 15, y: 3 },
{ x: 20, y: 5 },
{ x: 25, y: 7 },
{ x: 30, y: 9 },
{ x: 35, y: 11 },
{ x: 40, y: 13 }];
// Get the context
var context = d3.select("#gfg")
.node()
.getContext("2d");
var xScale = d3.scaleLinear()
.domain([0, 6])
.range([0, 2 * Math.PI]);
var yScale = d3.scaleLinear()
.domain([0, 20])
.range([90, 30]);
var Gen = d3.areaRadial()
.angle(d => xScale(d.x / 2))
.innerRadius(d => yScale(d.y) / 2)
.outerRadius(d => yScale(d.y))
// Specify the context
// to be used
.context(context);
context.translate(100, 100);
Gen(data);
context.strokeStyle = "black";
context.fillStyle = "green";
context.fill();
context.stroke();
</script>
</body>
</html>
Producción:
