d3:使用不同的变量调用brush-functions

时间:2018-05-03 12:26:22

标签: d3.js

我绘制了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();


}

0 个答案:

没有答案