D3.js brush.extent() Function
Last Updated :
01 Sep, 2020
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:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ 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:
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ 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:
Share your thoughts in the comments
Please Login to comment...