javascript - タイムスケールを使用しているときにd3 jsでブラシ範囲を設定するには?

Question

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() を使用しているときにブラシ領域を設定するにはどうすればよいですか?

もちろん、データにはブラシに収まる日付範囲が含まれており、余白があります。

マリウス