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, 00), new Date(2013, 8, 10, 23, 59, 59)]);

It does not display brushed area.

How to set brushed area when I'm using d3.time.scale()?

Of course data contain date ranges which can fit brushed are even with margins.

Mariusz

score 11 · Answer 1 · answered Aug 17 '13 at 19:38

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?

1 Answers1