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 src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h1 style="color: green;
text-align: center;">
Geeksforgeeks
</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:
