El método d3.line() se utiliza para construir un nuevo generador de líneas con la configuración predeterminada. El generador de líneas se usa luego para hacer una línea.
Sintaxis:
d3.line();
Parámetros: Este método no toma parámetros.
Valor de retorno: este método devuelve un generador de línea.
Ejemplo 1: Hacer una línea simple usando este método.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Line in D3.js</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<style>
path {
fill: none;
stroke: green;
}
</style>
<body>
<h1 style="text-align: center;
color: green;">GeeksforGeeks</h1>
<center>
<svg width="500" height="500">
<path></path>
</svg>
</center>
<script>
// Making a line Generator
var Gen = d3.line();
var points = [
[0, 100],
[500, 100]
];
var pathOfLine = Gen(points);
d3.select('path')
.attr('d', pathOfLine);
</script>
</body>
</html>
Producción:
Ejemplo 2: Realización de una línea Multiconectada.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Line in D3.js</title>
</head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<style>
path {
fill: none;
stroke: green;
}
</style>
<body>
<h1 style="text-align: center;
color: green;">GeeksforGeeks</h1>
<center>
<svg width="500" height="500">
<path></path>
</svg>
</center>
<script>
// Making a line Generator
var Gen = d3.line();
var points = [
[0, 100],
[500, 100],
[200, 200],
[500, 200]
];
var pathOfLine = Gen(points);
d3.select('path')
.attr('d', pathOfLine);
</script>
</body>
</html>
Producción:
