The brush.clear() Function in D3.js is used to set the active selection of the brush on the specified group. It is an alias for brush.move with the null selection.
Syntax:
brush.clear(group);
Parameters: This function accepts a single parameter as mentioned above and described below
- group: This parameter is the specified group on which brush is implemented.
Return Value: This function returns the array that defines the brush selection for that element.
Below programs illustrate the brush.clear() function in D3.js
Example 1:
HTML
<!DOCTYPE html>  <html>          <head>      <script src=     </script> </head>      <body>      <center>         <h1 style="color:green;">GeeksForGeeks</h1>           <h3>D3.js | brush.clear() Function </h3>                   <button>Click</button>         <br>         <br>         <svg width="500" height="100"              style="background-color: #aaf2ef;">         </svg>                   <script>              // Selecting SVG element             const svg = d3.select("svg");                           const g = svg.append("g");                           // Creating a brush using the              // d3.brush function             g.call(d3.brush());                           // Use of brush.move() function             d3.select("button").on("click", function() {                 g.call(d3.brush().clear)             });             </script>      </center> </body>      </html> |
Output:
Example 2:
HTML
<!DOCTYPE html>  <html>          <head>      <meta charset="utf-8">             <script src=     </script>           <style>           circle {           fill-opacity: 0.2;         }                   circle.active {           fill-opacity: 0.8;           stroke: red;           fill: green;         }       </style> </head>      <body>      <center>         <h1 style="color:green;">GeeksForGeeks</h1>           <h3>D3.js | brush.clear() Function </h3>                   <svg width="500" height="200"></svg>                   <script>              var data = d3.range(50).map(Math.random);               var svg = d3.select("svg"),                 margin = {top: 10, right: 50,                         bottom: 50, left: 50},                 width = +svg.attr("width") -                         margin.left - margin.right,                 height = +svg.attr("height") -                         margin.top - margin.bottom,                 g = svg.append("g")                     .attr("transform", "translate("                     + margin.left + "," + margin.top + ")"                     );               var x = d3.scaleLinear().range([0, width]),                 y = d3.randomNormal(height / 2, height / 8),                 z = d3.scaleLinear().range([0, height]);               var brush = d3.brushX()                 .extent([[0, 0], [width, height]])                 .on("start brush end", brushmoved);               g.append("g")                 .attr("class", "axis axis--x")                 .attr("transform", "translate(0,0)")                 .call(d3.axisLeft(z).ticks(3));               var circle = g.append("g")                 .attr("class", "circle")                 .selectAll("circle")                 .data(data)                 .enter().append("circle")                 .attr("transform", function (d) {                     return "translate("                     + x(d) + "," + y() + ")";                 })                 .attr("r", 10);               var gBrush = g.append("g")                 .attr("class", "brush")                 .call(brush);               gBrush.call(brush.clear);               var bs = "";             function brushmoved() {               var s = d3.event.selection;                               if (d3.event.type === "start"){                 bs = d3.event.selection;               }               else if (d3.event.type === "end"){                                   if (bs[0] !== s[0] && bs[1] !== s[1]) {                   console.log('moved both');                 }                 else if (bs[0] !== s[0]) {                   console.log('moved left');                 }                 else {                   console.log('moved right');                 }               }                               if (s == null) {                 handle.attr("display", "none");                 circle.classed("active", false);               }               else {                 var sx = s.map(x.invert);                 circle.classed("active", function (d) {                     return sx[0] <= d && d <= sx[1];                 });                 handle.attr("display", null)                 .attr("transform", function (d, i) {                     return "translate("                     + s[i] + "," + height / 2 + ")";                 });               }             }                       </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!
