The brush.extent() function in D3.js is used to set the brushable extent to the specified array of points [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner and returns the brush.
Syntax:
brush.extent([extent]);
Parameters: This function accepts a single parameter as mentioned above and described below
- extent: This parameter determines the size of the invisible overlay and also constrains the brush selection
Return Value: This function returns the brush.
Below programs illustrate the brush.extent() function in D3.js
Example 1:
<!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>
Output:
Example 2:
<!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>
Output:
