El interpolador lineal de curvas crea múltiples líneas eligiendo puntos que crean líneas rectas entre cada par de puntos adyacentes en el conjunto de datos. El interpolador d3.curveLinear es el interpolador predeterminado que se usa cuando no se llama al método line.curve() .
Sintaxis:
d3.curveLinear()
Parámetros: este método no acepta ningún parámetro
Valor devuelto: este método no devuelve ningún valor.
Ejemplo 1:
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>
</head>
<body>
<h1 style="text-align:center; color: green;">
GeeksforGeeks</h1>
<center>
<svg id="gfg" width="200" height="200">
</svg>
</center>
<script>
var data = [
{ x: 0, y: 0 },
{ x: 1, y: 3 },
{ x: 2, y: 15 },
{ x: 5, y: 15 },
{ x: 6, y: 1 },
{ x: 7, y: 5 },
{ x: 8, y: 1 }];
var xScale = d3.scaleLinear()
.domain([0, 8]).range([25, 175]);
var yScale = d3.scaleLinear()
.domain([0, 20]).range([175, 25]);
var line = d3.line()
.x((d) => xScale(d.x))
.y((d) => yScale(d.y))
// curveLinear is used
.curve(d3.curveLinear);
d3.select("#gfg")
.append("path")
.attr("d", line(data))
.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>
</head>
<body>
<h1 style="text-align:center;color:green;">
GeeksforGeeks</h1>
<center>
<svg id="gfg" width="200" height="200">
</svg>
</center>
<script>
var points = [
{ xpoint: 25, ypoint: 150 },
{ xpoint: 75, ypoint: 85 },
{ xpoint: 100, ypoint: 115 },
{ xpoint: 175, ypoint: 25 }];
var Gen = d3.line()
.x((p) => p.xpoint)
.y((p) => p.ypoint)
.curve(d3.curveLinear);
d3.select("#gfg")
.append("path")
.attr("d", Gen(points))
.attr("fill", "none")
.attr("stroke", "green");
</script>
</body>
</html>
Producción:
