d3.js using brush.clear() doesn't work for me

brush, d3.js, javascript

Solution

From the docs,

Note that this does not automatically redraw the brush or dispatch any events to listeners. To redraw the brush, call brush on a selection or transition; to dispatch events, use brush.event.

You can achieve this by first clearing the brush and then redrawing it.

d3.selectAll(".brush").call(brush.clear());

This first clears the brush and redraws all the brushes on your page.

Although, I always recommend doing `clear()` on selections in context with their parent containers. For example:

d3.selectAll(".brush-container .brush").call(brush.clear());

The use case is when you've multiple brushes on your page.

Now to specifically answer your question, you can call a function like this

var d3Brush = this.brush;

function clearBrush(){
  d3.selectAll("g.brush").call(d3Brush.clear());
}

And call

<span onclick="javascript: clearBrush();">[reset]</span>

Problem

In an object I store line chart made with d3.js, which have possibility to brush selected area. Selected area is removed when I click outside selected part of line chart. I'd like to remove selected area clicking on external link eg. [reset] Unfortunately even if I access brush object from line chart object calling `clear()` on `brush` object doesn't remove selection. How can I remove brush selection using external link from outside line chart? I create brush: ``` this.brush = d3.svg.brush() .x(xScale) .on('brushstart', function() { lineChart.brushStart(); }) .on('brushend', function() { lineChart.brushEnd(); }); ``` I create brushing area: ``` this.brushArea = svg.append('svg:g') .attr('class', 'brush') .call(this.brush) .selectAll('rect') .attr('height', this.height); ``` On external link I put `clear()` command: ``` <span onclick="javascript: lineChart.brush.clear();">[reset]</span> ``` It doesn't remove selection from line chart. Please help. Documentation about `brush.clear()` is not efficient.

Original source