如何在dc.js中获得两个范围图表，以免相互影响？

Question

我有以下条形图和相应的范围图表。

1. barChart1：时间与someId的关系（使用rangeChart1 - Time vs someId）
2. barChart2：SNo与someId（rangeChart2 - SNo vs someId）

当我对rangeChart1进行聚焦时，barChart1会被放大，而barChart2和rangeChart2则不会显示任何数据。

我的理解是，这是因为chart.filter（）为每个范围图表提供了不同的值。

对于使用不同维度和组的barChart1和barChart2，是否有任何方法可以使用单个rangeChart？

或

有没有办法让这些图表不相互交互，这样当rangeChart1聚焦时，只有barChart1被放大而barChart2和rangeChart2保持不变，反之亦然？

这是代码：

var barChart1 = dc.barChart("#bar-chart1");
var rangeChart1 = dc.barChart("#range-chart1");
var barChart2 = dc.barChart("#bar-chart2");
var rangeChart2 = dc.barChart("#range-chart2");

var timeFmt = d3.time.format('%Y%m%d%H%M%S.%L'); //20171027143649.0
var startDate = new Date(2018,00,03,07,25,58);
var currDate = new Date(2018,00,09,09,45,15); 

d3.csv("data.csv", function(err,data){
    if (err) throw err;

    data.forEach(function (d){
        d.time = timeFmt.parse(d.date);
        d.tsecond = d3.time.second(d.time);
        d.SNo = +d.SNo;
        d.someId = +d.someId;
        d.something = d.something;

    });

    var ndx = crossfilter(data);
    var all = ndx.groupAll(); 

    var Dim1 = ndx.dimension(function(d){return [d.time,d.something,d.SNo]; });
    var Group1 = Dim1.group().reduceSum(function(d){return d.someId; });

    var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
    var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });

    var someColors = d3.scale.ordinal()
                          .domain(["a1","a2","a3","a4","a5","a6","a7","a8"]) .range(["#2980B9","#00FFFF","#008000","#FFC300","#FF5733","#D1AEF1","#C0C0C0","#000000"]);

    barChart1
            .height(250)
            .width(1000)
            .brushOn(false)
            .mouseZoomable(true)
            .dimension(Dim1)
            .rangeChart(rangeChart1)
            .x(d3.time.scale().domain([startDate,currDate]))
            .xUnits(d3.time.second)
            .group(Group1)
            .keyAccessor(function(d){return d.key[0]; })
            .valueAccessor(function(d){return d.value; })

            .colors(someColors)
            .colorAccessor(function(d){return d.key[1]; })

            .title( function(d){ 
                    return [
                        "Date: " + d.key[0].getDate() + "/" + (d.key[0].getMonth() + 1) + "/" + d.key[0].getFullYear(),
                        "Time: " + d.key[0].getHours() + ":" + d.key[0].getMinutes() + ":" + d.key[0].getSeconds() + "." + d.key[0].getMilliseconds(),
                        "something: " + d.key[1] + " ( Id: " + d.value + " )",
                        "SNo: " + d.key[2]
                    ].join('\n')})

            .xAxis().tickFormat(d3.time.format("%H:%M:%S"));


    rangeChart1
            .height(50)
            .width(1000)
            .brushOn(true)
            .dimension(Dim1)
            .x(d3.time.scale().domain([startDate,currDate]))
            .xUnits(d3.time.second)
            .group(Group1)
            .keyAccessor(function(d){return d.key[0]; })
            .valueAccessor(function(d){return d.value; })

            .colors(someColors)
            .colorAccessor(function(d){return d.key[1]; })

            .on("filtered", function(chart){
                dc.events.trigger(function(){
                    barChart1.focus(chart.filter());
                    //dc.redrawAll(chart.chartGroup());
                });
            })

            .xAxis().tickFormat(d3.time.format("%b %d"));


    barChart2
            .height(250)
            .width(1000)
            .brushOn(false)
            .mouseZoomable(true)
            .x(d3.scale.linear().domain([600,800]))
            .elasticY(false)
            .dimension(Dim2)
            .rangeChart(rangeChart2)
            .group(Group2)
            .keyAccessor(function(d){ return d.key[0]; })
            .valueAccessor(function(d){return d.value; })

            .colors(someColors)
            .colorAccessor(function(d){return d.key[1]; })

            .title( function(d){ 
                    //var Button = +d.key[1];
                    return [
                        "something: " + d.key[1] + " ( Id: " + d.value + " )",
                        "SNo: " + d.key[0]
                    ].join('\n')});


    rangeChart2
            .height(50)
            .width(1000)
            .brushOn(true)
            .dimension(Dim2)
            .x(d3.scale.linear().domain([600,800]))
            .group(Group2)
            .keyAccessor(function(d){return d.key[0]; })
            .valueAccessor(function(d){return d.value; })

            .colors(someColors)
            .colorAccessor(function(d){return d.key[1]; })

            .on("filtered", function(chart){
                dc.events.trigger(function(){
                    barChart2.focus(chart.filter());
                    //dc.redrawAll(chart.chartGroup());
                });
            })

    dc.renderAll();

});

数据与此类似：

SNo,date,something,someId
1,20180103072558.250,a1,3
2,20180103072644.400,a5,5
3,20180103072645.500,a7,7
4,20180103073719.230,a5,5
5,20180103073724.700,a8,8
6,20180103073720.620,a3,3
7,20180103074219.610,a4,4
8,20180103074210.420,a2,2
9,20180103074210.310,a6,6

图片： 过滤rangeChart1时：

过滤rangeChart2时：