The d3.brushSelection() function in D3.js is used to get the brush selection for a given node.
Syntax:
d3.brushSelection(this);
- this: used to get the bounds for the current brush.
Parameters:
Return Value: This function returns the array containing the bounds of the brush element.
Example: In this example, we will create a brush and will get its selection bound sides using this method.
<!DOCTYPE html> <html> <head> <title> D3.js | d3.brushSelection() Function </title> </script> </head> <body> <h1 style="color: green; text-align: center;"> Geeksforneveropen </h1> <p style="text-align: center;"> D3.js | d3.brushSelection() Function <br /> Dimensions are:<br /> </p> <p style="text-align: center;" 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", brushed) /* Initialise the brush area: start at 0, 0 and finishes at given width, height*/ .extent([ [0, 0], [600, 600], ]) ); function brushed() { // Using d3.brushSelection to get bounds of the brush const sel = d3.brushSelection(this); console.log(sel); var p = document.getElementById("p"); p.innerHTML = "side1 : " + sel[0][1] + `<br>` + "side2 : " + sel[1][1] + `<br>` + "side3 : " + sel[0][0] + `<br>` + "side4 : " + sel[1][0] + `<br>`; } </script> </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!
