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.

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.

• javascript
• d3.js
• brush

4 Answers 4

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>

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

The second line is to redraw the brush.

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.

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);