D3.js brush.extent() Function

0 0 1 minute read

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= 
        "https://d3js.org/d3.v4.min.js">  
    </script>  
</head>  
    
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforzambiatek  
        </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= 
        "https://d3js.org/d3.v4.min.js">  
    </script>  
     
</head>  
    
<body>  
    <center> 
        <h1 style="color: green;">  
            Geeksforzambiatek  
        </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, zambiatek 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!