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!
