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: