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 controlados por datos. La función Path.moveTo() se usa para mover un punto dentro del elemento svg. Esta biblioteca también tiene la capacidad suficiente para dibujar simulaciones, gráficos 2D y gráficos 3D y se utiliza para producir visualizaciones de datos dinámicas e interactivas . Hace uso de gráficos vectoriales escalables, es decir, elementos SVG. Esta biblioteca funciona principalmente con vectores svg.
Sintaxis:
Path.moveTo(x,y)
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- X: Este parámetro la posición x del elemento.
- Y: Este parámetro la posición y del elemento.
El siguiente ejemplo ilustra la función Path.moveTo() en D3.js :
Ejemplo 1:
Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
h1 {
color: green;
}
div {
display: inline-block;
}
svg{
background-color: #f2f2f2;
}
.path1{
stroke: #000;
}
.path2{
stroke: green;
}
.path3{
stroke: #000;
}
</style>
<body>
<center>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.moveTo() Function</b>
<br>
<svg width="100" height="100">
<path class="path1">
</svg>
<svg width="100" height="100">
<path class="path2">
</svg>
<svg width="100" height="100">
<path class="path3">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>;
// Creating a path
var path1= d3.path();
path1.moveTo(0, 0);
// Making line to x:0 and y:100
path1.lineTo(0, 100);
// Closing the path
path1.closePath();
d3.select(".path1").attr("d",path1);
var path2= d3.path();
// Start point are x:20 and y:20
path2.moveTo(20, 20);
path2.lineTo(20, 100);
path2.closePath();
d3.select(".path2").attr("d",path2);
var path3= d3.path();
// Start point are x:40 and y:20
path3.moveTo(40,20);
path3.lineTo(40, 100);
path3.closePath();
d3.select(".path3").attr("d",path3);
</script>
</center>
</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>Document</title>
</head>
<style>
h1 {
color: green;
}
div {
display: inline-block;
}
svg{
background-color: #f2f2f2;
}
.path1{
stroke: #000;
}
.path2{
stroke: green;
}
.path3{
stroke: #000;
}
</style>
<body>
<center>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.moveTo() Function</b>
<br>
<svg width="100" height="100">
<path class="path1">
</svg>
<svg width="100" height="100">
<path class="path2">
</svg>
<svg width="100" height="100">
<path class="path3">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>;
// Creating a path
var path1= d3.path();
// Start point are x:0 y:0
path1.moveTo(0, 0);
// Making line to x:50 and y:50
path1.lineTo(50, 50);
// Closing the path
path1.closePath();
d3.select(".path1").attr("d",path1);
var path2= d3.path();
// Start point are x:0 and y:100
path2.moveTo(0, 100);
path2.lineTo(50, 50);
path2.closePath();
d3.select(".path2").attr("d",path2);
var path3= d3.path();
// Start point are x:100 and y:100
path3.moveTo(100,100);
path3.lineTo(50, 50);
path3.closePath();
d3.select(".path3").attr("d",path3);
</script>
</center>
</body>
</html>
Producción:
