Javascript d3将笔刷捕捉到xAxis上的日期

我在d3图表上显示了以下数据：

[{
    "Date": "2012",
    "Total": 5340
}, {
    "Date": "2013",
    "Total": 4120
}, {
    "Date": "2014",
    "Total": 1259
}, {
    "Date": "2015",
    "Total": 3617
}, {
    "Date": "2016",
    "Total": 2005
}]

图表上还有一个画笔，因此用户可以通过拖动画笔将注意力集中在选定的年份上。但是，笔刷允许用户拖动第一年和最后一年之间的所有日期

我想做的是让它与用户刷牙时的年份相吻合

以下是我的笔刷事件代码：

var brush = d3.svg.brush()
    .x(xScale2)
    .on('brush', brushed);

function brushed() {
    var min = d3.min(data.map(function (d) {
        return d.total;
    }));
    var max = d3.max(data.map(function (d) {
        return d.total;
    }));
    var extent = brush.extent();
    if (!brush.empty()) {

        // Snap to years
            var newBrush = extent.map(d3.time.year.round);
            if (newBrush[0] >= newBrush[1]) {// If empty when rounded, use floor & ceil instead.
                newBrush[0] = d3.time.year.floor(extent[0]);
                newBrush[1] = d3.time.year.ceil(extent[1]);

            }
            // update the extent
            brush.extent([newBrush[0], newBrush[1]]);
            extent = brush.extent();

            xScale.domain(brush.empty() ? xScale2.domain() : extent);
            yScale.domain([
                d3.min(data.map(function (d) {
                    return (d.date >= extent[0] && d.date <= extent[1]) ? d.total : max;
                })),
                d3.max(data.map(function (d) {
                    return (d.date >= extent[0] && d.date <= extent[1]) ? d.total : min;
                }))
            ]);

        xScale.domain(brush.empty() ? xScale2.domain() : extent);
        yScale.domain([
            d3.min(data.map(function (d) {
                return (d.date >= extent[0] && d.date <= extent[1]) ? d.total : max;
            })),
            d3.max(data.map(function (d) {
                return (d.date >= extent[0] && d.date <= extent[1]) ? d.total : min;
            }))
        ]);
    }
    totalChart.attr('d', totalLine); // update line
    focus.select('.x.axis').call(xAxis); // update xAxis
    focus.select('.y.axis').call(yAxis); // update yAxis
}

var brush=d3.svg.brush（）
.x（xScale2）
.on（“刷子”，刷子）；
函数brushed（）{
var min=d3.min（data.map（函数d）{
返回d.total；
}));
var max=d3.max（data.map（函数d）{
返回d.total；
}));
var extent=brush.extent（）；
如果（！brush.empty（））{
//年复一年
var newBrush=范围图（d3.时间.年份.全年）；
如果（newBrush[0]>=newBrush[1]）{//如果四舍五入时为空，则改用floor&ceil。
newBrush[0]=d3.时间.年份.楼层（范围[0]）；
newBrush[1]=d3.时间.年份.ceil（范围[1]）；
}
//更新范围
范围（[newBrush[0]，newBrush[1]]）；
extent=brush.extent（）；
域（brush.empty（）？xScale2.domain（）：范围）；
yScale.domain([
d3.min（数据映射）函数（d）{
return（d.date>=extent[0]&&d.date=extent[0]&&d.date=extent[0]&&d.date=extent[0]&&d.date这是带有年份捕捉的mbostock代码。它只是在后台边界上有一个小错误

除了背景/笔刷元素同步中的一个小缺陷外，此代码工作正常


var margin={top:0，right:40，bottom:50，left:40}，
宽度=500-边距。左侧-边距。右侧，
高度=100-margin.top-margin.bottom；
var x=d3.time.scale（）
.domain（[新日期（2012年1月1日），新日期（2023年1月1日）]）
.范围（[0，宽度]）；
var brush=d3.svg.brush（）
.x（x）
.范围（[新日期（2014年1月1日），新日期（2015年1月1日）]）
.“刷头”，刷头；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类”、“网格背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.append（“g”）
.attr（“类”、“x网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.time.months，6）
.1尺寸（高度）
.tick格式（“”）
.selectAll（“.tick”）
.classed（“minor”，函数（d）{return d.getHours（）；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.年）
.1（0））
.selectAll（“文本”）
.attr（“x”，6）
.style（“文本锚定”，null）；
var gBrush=svg.append（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.呼叫（刷子、事件）；
gBrush.selectAll（“rect”）
.attr（“高度”，高度）；
函数brushended（）{
如果（！d3.event.sourceEvent）返回；//仅在输入后转换
var extent0=brush.extent（），
extent1=extent0.map（d3.time.year.round）；
//如果圆形时为空，则使用地板和天花板
if（extent1[0]>=extent1[1]）{
extent1[0]=d3.时间.年份.楼层（extent0[0]）；
extent1[1]=d3.time.year.ceil（extent0[1]）；
}
d3.选择（this）.transition（）
.call（画笔范围（extent1））
.呼叫（刷子、事件）；
}
.axis文本{
字体：11px无衬线；
}
.轴路径{
显示：无；
}
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.网格背景{
填充：#ddd；
}
.网格线，
.网格路径{
填充：无；
冲程：#fff；
形状渲染：边缘清晰；
}
.grid.minor.tick行{
笔画不透明度：.5；
}
.刷{
行程：#000；
填充不透明度：.125；
形状渲染：边缘清晰；
}
这是带有年份捕捉的mbostock代码。它只是在背景边界上有一个小错误

除了背景/笔刷元素同步中的一个小缺陷外，此代码工作正常


var margin={top:0，right:40，bottom:50，left:40}，
宽度=500-边距。左侧-边距。右侧，
高度=100-margin.top-margin.bottom；
var x=d3.time.scale（）
.domain（[新日期（2012年1月1日），新日期（2023年1月1日）]）
.范围（[0，宽度]）；
var brush=d3.svg.brush（）
.x（x）
.范围（[新日期（2014年1月1日），新日期（2015年1月1日）]）
.“刷头”，刷头；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“rect”）
.attr（“类”、“网格背景”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
svg.append（“g”）
.attr（“类”、“x网格”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.time.months，6）
.1尺寸（高度）
.tick格式（“”）
.selectAll（“.tick”）
.classed（“minor”，函数（d）{return d.getHours（）；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.svg.axis（）
.比例（x）
.orient（“底部”）
.滴答声（d3.时间.年）
.1（0））
.selectAll（“文本”）
.attr（“x”，6）
.style（“文本锚定”，null）；
var gBrush=svg.append（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.呼叫（刷子、事件）；
gBrush.selectAll（“rect”）
.attr（“高度”，高度）；
函数brushended（）{
如果（！d3.event.sourceEvent）返回；//仅在输入后转换
var extent0=brush.extent（），
extent1=extent0.map（d3.time.year.round）；
//如果圆形时为空，则使用地板和天花板
如果（extent1[0]>=extent1