javascript - How to set up brush extent in d3 js while using time scale? - Stack Overflow

admin管理员组

文章数量:1296923

I have a problem with brushing using brush.extent([val1, val2])

Regarding documentation: 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

I have a problem with brushing using brush.extent([val1, val2])

Regarding documentation: https://github./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

• javascript
• d3.js
• brush

Share Improve this question Follow asked Aug 17, 2013 at 19:02 sanneosanneo 37544 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

本文标签： javascriptHow to set up brush extent in d3 js while using time scaleStack Overflow