D3.js brushSelection() Function

Last Updated : 31 Jul, 2020

The d3.brushSelection() function in D3.js is used to get the brush selection for a given node.

Syntax:

d3.brushSelection(this);

Parameters:

this: used to get the bounds for the current brush.

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> 