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!
… [Trackback]
[…] Find More on that Topic: geeksforgeeks.org/d3-js-brush-clear-function-2/ […]