La función brush.extent() en D3.js se usa para establecer la extensión que se puede aplicar a la array especificada de puntos x0 y0 x1 y1 x0 y0 x1 y1 y devuelve el pincel.
Sintaxis:
brush.extent([extent]);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación
- extensión: este parámetro determina el tamaño de la superposición invisible y también restringe la selección del pincel
Valor de retorno: esta función devuelve el pincel.
Los siguientes programas ilustran la función brush.extent() en D3.js
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<p style="color:green;">
D3.js | brush.extent() Function <br>
</p>
<svg width="400" height="200" id="brush">
</svg>
<script>
// Selecting SVG element
d3.select("#brush")
// Creating a brush using the
// d3.brush function
.call( d3.brush()
// use of brush.extent() Function
.extent( [ [0,0], [600,300] ] )
)
.style("fill", "#e0afdd");
</script>
</center>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<p style="color: green;">
D3.js | brush.extent() Function <br>
Dimensions are:<br>
</p>
<p id="p"></p>
<svg width="600" height="600" id="brush">
</svg>
<script>
// Selecting SVG element
d3.select("#brush")
// Creating a brush
.call(d3.brush()
// Calling a function
// on brush change
.on("brush", geekBrush)
// Use of brush.extent() Function
.extent([[0, 0], [600, 300]])
);
function geekBrush() {
const sel = d3.brushSelection(this);
var p = document.getElementById("p");
p.innerHTML = "X0 : "
+ sel[0][1] + `<br>`
+ "X1 : " + sel[1][1]
+ `<br>` + "Y0 : "
+ sel[0][0] + `<br>`
+ "Y1 : " + sel[1][0] + `<br>`;
}
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA