D3.js se usa principalmente para hacer gráficos y visualizar datos en los elementos HTML SVG. D3 de alguna manera está relacionado con los documentos basados en datos. La Ruta se usa para hacer que el SVG, la Ruta cree un objeto que tiene todas las propiedades de la RUTA del lienzo. Esta biblioteca también es capaz de dibujar simulaciones, gráficos 2D y gráficos 3D. Las proyecciones también son una característica incorporada de esta biblioteca.
Sintaxis:
path.
Parámetros: No se requieren parámetros ni argumentos.
Retorno: esta ruta devuelve un objeto que tiene el mismo método de ruta que proporciona el lienzo HTML.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>D3.js| Path</title>
</head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<b>D3.js|Path</b>
<div>
<svg width="220" height="220">
<path class="path1" stroke="white">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js"></script>
<script>
var path = d3.path();
// Starting points are x:10 and y:10
path.moveTo(10, 10);
// Making line to points x:200 and y:200
path.lineTo(200, 200);
d3.select(".path1").attr("d",path)
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>D3.js| Path</title>
</head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<b>D3.js|Path</b>
<div>
<svg width="210" height="210">
<path class="path1" stroke="white">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js"></script>
<script>
var path = d3.path();
// Point start at x:10 y:10
path.moveTo(10, 10);
// Making line to x:10 y:200
path.lineTo(10, 200);
// Point start at x:10 y:10
path.moveTo(10, 200);
// Making line to x:200 y:200
path.lineTo(200, 200);
// Point start at x:200 y:200
path.moveTo(200, 200);
// Making line to x:200 y:10
path.lineTo(200, 10);
// Point start at x:200 y:10
path.moveTo(200, 10);
// Making line to x:10 y:10
path.lineTo(10, 10);
d3.select(".path1").attr("d",path)
</script>
</body>
</html>
Producción:
