La función path.toString() en d3.js se usa para devolver la representación de string de la ruta de la forma dibujada. La representación de la ruta está de acuerdo con la especificación de datos de la ruta del SVG.
Sintaxis:
path.toString()
Parámetros: Esta función no acepta ningún parámetro.
Valor de retorno: esta función devuelve una string.
Ejemplo 1:
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>
<svg width="100" height="100">
<path class="path2">
</svg>
</div>
<script>
// Creating a path
var path = d3.path();
path.moveTo(10, 10);
path.bezierCurveTo(95, 10, 50, 90, 10, 10)
// Printing the string of the path
console.log(path.toString())
path.bezierCurveTo(90, 10, 15, 110, 10, 10)
// Closing the path
path.closePath();
d3.select(".path2").attr("d", path);
</script>
</body>
</html>
Salida: la string de ruta para esta forma se proporciona en la consola.
Ejemplo 2:
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>
<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);
path.lineTo(90, 90);
// Closing the path
path.closePath();
path.moveTo(90, 90);
path.lineTo(10, 90);
// Closing the path
path.closePath();
path.moveTo(10, 90);
path.lineTo(10, 10);
// Closing the path
path.closePath();
// Printing the string of the path
console.log(path.toString())
d3.select(".path2").attr("d", path);
</script>
</body>
</html>
Salida: la string de ruta para la forma cuadrada se proporciona en la consola.
