La función path.lineTo() se usa para dibujar una línea a un punto dado desde el conjunto actual de puntos.
Sintaxis:
path.lineTo(x, y);
Parámetros: Toma dos parámetros como se mencionó anteriormente y se describe a continuación.
- x: Es la posición x del punto al que se va a dibujar la línea.
- y: Es la posición y del punto al que se va a dibujar la línea.
Valor devuelto: No devuelve ningún valor.
Ejemplo 1: Hacer una línea de (0, 0) a (100, 100).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<style>
h1 {
color: green;
}
svg {
background-color: #f2f2f2;
}
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.lineTo() Function</b>
<br><br>
Making a line from (0, 0) to (100, 100) <br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path = d3.path();
path.moveTo(0, 0);
// Making line to x:100 and y:100
path.lineTo(100, 100);
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</script>
</body>
</html>
Producción:
Ejemplo 2: Hacer un cuadrado usando la función lineTo().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" path1tent=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<style>
h1 {
color: green;
}
svg {
background-color: #f2f2f2;
}
.path2 {
stroke: #000;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.lineTo() Function</b>
<br><br>
Making a square using lineTo() function<br>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path = d3.path();
path.moveTo(10, 10);
// Making line to x:90 and y:10
path.lineTo(90, 10);
// Closing the path
path.closePath();
path.moveTo(90, 10);
// Making line to x:90 and y:90
path.lineTo(90, 90);
// Closing the path
path.closePath();
path.moveTo(90, 90);
// Making line to x:10 and y:90
path.lineTo(10, 90);
// Closing the path
path.closePath();
path.moveTo(10, 90);
// Making line to x:10 and y:10
path.lineTo(10, 10);
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</script>
</body>
</html>
Producción:
