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;"> Geeksforneveropen </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;"> Geeksforneveropen </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
