3

我在使用 Brush.extent([val1, val2]) 刷牙时遇到问题

关于文档:https://github.com/mbostock/d3/wiki/SVG-Controls当我像这样设置 Brush.extent([val1, val2]) 时:

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

它将在 xAxis 上显示 100 到 200 的画笔区域(画笔可见且位于正确位置)。

不幸的是,当我使用 d3.time.scale() 它根本不起作用:

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

它不显示拉丝区域。

使用 d3.time.scale() 时如何设置拉丝区域?

当然,数据包含可以适合刷过的日期范围,甚至有边距。

马吕什

4

1 回答 1

11

我找到了问题和解决方案。

我正在使用功能:

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

处理所有原始数据值,格式为 yyyy-mm-dd hh:mm:ss

在设置 Brush.extent([val1, val2]) 时,我需要使用相同的 parseDate() 函数:

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

马吕什

于 2013-08-17T19:38:17.570 回答