我绘制了3张图表,并为每个图形创建了一个画笔:
var brush_month = d3.brushX()
.extent([[xScale_month.range()[0], padding],[xScale_month.range()[1],h_bar-padding ]])
.on("brush", brushmove)
.on("end", brushend);
var brushg_month = svg_bar1.append("g")
.attr("class","brush")
.call(brush_month);
var brush_day = d3.brushX()
.extent([[xScale_day.range()[0], padding],[xScale_day.range()[1],h_bar-padding ]])
.on("brush", brushmove)
.on("end", brushend);
var brushg_day = svg_bar2.append("g")
.attr("class","brush")
.call(brush_day);
var brush_hour = d3.brushX()
.extent([[xScale_hour.range()[0], padding],[xScale_hour.range()[1],h_bar-padding ]])
.on("brush", brushmove)
.on("end", brushend);
var brushg_hour = svg_bar3.append("g")
.attr("class","brush")
.call(brush_hour);
然后我创建了一个brushend和brushmove函数,根据使用的是哪个画笔,应该使用不同的变量(dim和xScale)。而且我不太确定如何使用不同的变量调用函数,或者是否需要为每个画笔创建brushend和brushmove函数。我的brushmove函数看起来像这样,只使用一个画笔时工作正常:
function brushmove(){
if(d3.event.selection != null){
//map the coordinates of the brushs' ends to the month/day/hour
var d0 = d3.event.selection.map(xScale.invert),
d1 = [Math.round(d0[0]),Math.round(d0[1])];
// If empty when rounded, use floor & ceil instead.
if (d1[0] >= d1[1]) {
d1[0] = Math.floor(d0[0]);
d1[1] = Math.ceil(d0[1]);
}
//filter dimension such that it is within the brush
if (d1[0] == (d1[1]-1)){
dim.filter(d1[0]);
} else {
dim.filter([d1[0],d1[1]]);
}
}
//update everything
renderAll();
}