El método d3.area.context() le permite representar el área en el contexto de un elemento de lienzo. El área se representará en el contexto actual cuando se invoque el generador. 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.area.context(_context);
Parámetros:
- _context: Contexto establecido por el usuario.
Valor devuelto: este método devuelve el contexto actual.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 | area.context() Method
</h3>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
<script>
var data = [
{xpoint: 25, ypoint: 150},
{xpoint: 75, ypoint: 50},
{xpoint: 100, ypoint: 150},
{xpoint: 100, ypoint: 50},
{xpoint: 200, ypoint: 150}];
var context = d3.select("#gfg")
.node().getContext("2d");
var Gen = d3.area()
.x((p) => p.xpoint)
.y0((p) => p.ypoint/2)
.y1((p) => p.ypoint)
.context(context);
context.translate(10,50);
Gen(data);
context.strokeStyle = "black";
context.fillStyle = "green";
context.fill();
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 | area.context() Method
</h3>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
<script>
var points = [
{x: 50, y: 10},
{x: 150, y: 30},
{x: 200, y: 150},
{x: 250, y: 10},
{x: 300, y: 150},
{x: 350, y: 50},
{x: 400, y: 190}];
var context = d3.select("#gfg")
.node().getContext("2d");
var Gen = d3.area()
.x((p) => p.x)
.y0((p) => p.y/2)
.y1((p) => p.y)
.context(context);
context.translate(10,10);
Gen(points);
context.strokeStyle = "black";
context.fillStyle = "green";
context.fill();
context.stroke();
</script>
</body>
</html>
Producción:
