How to set up brush extent in d3 js while using time scale?

Question

I have a problem with brushing using brush.extent([val1, val2]) Regarding documentation: https://github.com/mbostock/d3/wiki/SVG-Controls when I set up brush.extent([val1, val2]) like this: ``` var xScale = d3.scale.linear() .domain(data) .range([0, 500]); var brush = d3.svg.brush() .x(xScale) .on('brushstart', function() { this.brushStart(); }) .on('brushend', function() { this.brushEnd(); }) .extent([100, 300]); ``` It will display brushed area from 100 to 200 on xAxis (brush is visible and on right position). Unfortunately when I'm using d3.time.scale() it doesn't work at all: ``` var xScale = d3.time.scale() .domain(data) .range([0, 500]); var brush = d3.svg.brush() .x(xScale) .on('brushstart', function() { this.brushStart(); }) .on('brushend', function() { this.brushEnd(); }) .extent([100, 300]); // or // .extent(['2013-08-01T00:00:00Z', '2013-08-10T23:59:59Z']); // or // .extent(['2013-08-01 00:00:00', '2013-08-10 23:59:59']); // or even // .extent([new Date(2013, 8, 1, 00, 00,…

Accepted Answer

I found the problem and solution.

I'm using function:

```
var parseDate = d3.time.format('%Y-%m-%d %H:%M:%S').parse;
```

To process all data values, which are original in format yyyy-mm-dd hh:mm:ss

While set up brush.extent([val1, val2]) I need to use the same parseDate() function:

```
brush.extent([parseDate(val1), parseDate[val2]]);
```

Mariusz

How to set up brush extent in d3 js while using time scale?

Solution

Problem