El método d3.line.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.line.context(_context);
Parámetros:
- _context: contexto establecido por el usuario.
Valor devuelto: este método devuelve el contexto actual.
Ejemplo 1: En este ejemplo, cambie el color, trazo usando este método.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>d3.line.defined()</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<body>
<h1 style="text-align: center;
color: green;">
GeeksforGeeks
</h1>
<center>
<canvas id="gfg" width="200" height="200">
</canvas>
</center>
<script>
var points = [
{x: 0, y: 0},
{x: 1, y: 3},
{x: 2, y: 15},
{x: 3, y: 8},
{x: 4, y: 11},
{x: 5, y: 15},
{x: 6, y: 20},
{x: 7, y: 25}];
var xp = d3.scaleLinear().domain([0, 7]).range([25, 200]);
var yp = d3.scaleLinear().domain([0, 25]).range([175, 25]);
var cont = d3.select("#gfg").node().getContext("2d");
var line = d3.line()
.x(d => xp(d.x))
.y(d => yp(d.y))
.context(cont);
line(points);
cont.strokeStyle = "green";
cont.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, cambie de color, rellene con este método.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>d3.line.defined()</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<body>
<h1 style="text-align: center; color: green;">
GeeksforGeeks
</h1>
<center>
<canvas id="gfg" width="200" height="200"></canvas>
</center>
<script>
var points = [
{x: 0, y: 0},
{x: 1, y: 3},
{x: 2, y: 15},
{x: 3, y: 8},
{x: 4, y: 11},
{x: 5, y: 15},
{x: 6, y: 20},
{x: 7, y: 25}];
var xp = d3.scaleLinear().domain([0, 7]).range([25, 200]);
var yp = d3.scaleLinear().domain([0, 25]).range([175, 25]);
var cont = d3.select("#gfg").node().getContext("2d");
var line = d3.line()
.x(d => xp(d.x))
.y(d => yp(d.y))
.context(cont);
line(points);
cont.strokeStyle = "green";
cont.fill();
</script>
</body>
</html>
Producción:
