D3.js es una biblioteca en Javascript, esta biblioteca se usa principalmente para hacer gráficos y visualizar datos en los elementos HTML SVG. D3 significa Documentos controlados por datos y se utiliza principalmente para la visualización de datos. Path.rect () se usa para hacer un rectángulo en un elemento svg.
Sintaxis:
Path.rect(x, y, w, h);
Parámetros: esta función acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- X: Es la posición x del rectángulo.
- Y: Es la posición y del rectángulo.
- W: Es el ancho del rectángulo.
- H: Es la altura del rectángulo.
El siguiente ejemplo ilustra la función 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>D3.js | Path.rect() function</title>
</head>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.rect() function</b>
<br>
<svg width="400" height="300">
<text x="50" y="50" font-family="Verdana"
fill="white">
SVG Element
</text>
<path class="path1">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
// Creating path object
var path1= d3.path();
// Creating rectangle at x:50 and y:100
// and height:200, width:300
path1.rect(50,70,300,200);
d3.select(".path1").attr("d",path1);
</script>
</body>
</html>
Producción:
Ejemplo 2:
Javascript
<!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.rect() function</title>
</head>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
svg{
background-color: green;
}
.path1{
fill: aliceblue;
}
</style>
<body>
<div>
<h1>GeeksforGeeks</h1>
<b>D3.js | Path.rect() function</b>
<br>
<svg width="400" height="300">
<text x="50" y="50" font-family="Verdana"
fill="white">
SVG Element
</text>
<path class="path1">
</svg>
</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
// Creating path object
var path1= d3.path();
// Creating rectangle at x:50 and y:100
// and height:200, width:300
path1.rect(100, 70, 200, 200);
d3.select(".path1").attr("d",path1);
</script>
</body>
</html>
Producción:
