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

Question

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.

Answer 1

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>

Answer 2

brush.clear();
svg.selectAll('.brush').call(brush);

The second line is to redraw the brush.

Answer 3

brush.clear() only resets the extent. You need to call brush again to redraw the brush. The documentation for brush.extent has some details about this.

Answer 4

You may also want to call brush.event() to make sure your listeners are fired. In d3.v3 it would look like this:

this.brushArea.call( this.brush.clear());
this.brush.event(this.brushArea);