DC.js範圍/焦點圖表不能正常工作

Question

我有兩個區域圖表，下面有一個區域選擇。我希望每個範圍選擇只與它各自的圖形進行交互。現在定義像下面這樣的圖形，我得到了這種行爲，但是當我通過單擊範圍圖表清除選擇後，畫筆消失，但選擇依然存在。有沒有一些設置我不正確？或者更好的是定義一個自定義的動作來清除畫筆？

var leftFocusChart = dc.lineChart("#volume-focus-left") 
    .renderArea(true) 
    .width(colmd12Width) 
    .height(75) 
    .transitionDuration(0) 
    .margins({top: 10, right: 20, bottom: 20, left: 40}) 
    .dimension(week) 
    .group(weeks) 
    .transitionDuration(0) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; }))) 
    .xUnits(d3.time.days); 

    leftFocusChart.yAxis().ticks(0); 

    var leftVolumeChart = dc.lineChart("#volume-chart-left") 
    .renderArea(true) 
    .width(colmd12Width) 
    .height(fiftyPerViewPortHeight) 
    .transitionDuration(0) 
    .margins({top: 10, right: 20, bottom: 30, left: 40}) 
    .dimension(date) 
    .group(dates) 
    .brushOn(false) 
    .colors(d3.scale.category20c()) 
    .transitionDuration(0) 
    .rangeChart(leftFocusChart) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; }))) 
    .xUnits(d3.time.week); 

    var rightFocusChart = dc.lineChart("#volume-focus-right") 
    .renderArea(true) 
    .width(colmd12Width) 
    .height(75) 
    //.chartGroup('r') 
    .transitionDuration(0) 
    .margins({top: 10, right: 20, bottom: 20, left: 40}) 
    .dimension(week) 
    .group(weeks) 
    .transitionDuration(0) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; }))) 
    .xUnits(d3.time.days); 

    rightFocusChart.yAxis().ticks(0); 

    var rightVolumeChart = dc.lineChart("#volume-chart-right") 
    .renderArea(true) 
    .width(colmd12Width) 
    .height(fiftyPerViewPortHeight) 
    //.chartGroup('r') 
    .transitionDuration(0) 
    .margins({top: 10, right: 20, bottom: 30, left: 40}) 
    .dimension(date) 
    .group(dates) 
    .brushOn(false) 
    .colors(d3.scale.category20c()) 
    .transitionDuration(0) 
    .rangeChart(rightFocusChart) 
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d.date; }))) 
    .xUnits(d3.time.week); 

    dc.chartRegistry.deregister(leftFocusChart); 
    dc.chartRegistry.deregister(leftVolumeChart); 
    dc.chartRegistry.deregister(rightFocusChart); 
    dc.chartRegistry.deregister(rightVolumeChart); 

    dc.chartRegistry.register(leftFocusChart, "l"); 
    dc.chartRegistry.register(leftVolumeChart, "l") 

    dc.chartRegistry.register(rightFocusChart, "r"); 
    dc.chartRegistry.register(rightVolumeChart, "r"); 

    console.log("Left:"); 
    console.log(dc.chartRegistry.list("l")); 
    console.log("====================================="); 
    console.log("Right:"); 
    console.log(dc.chartRegistry.list("r")); 

Answer 1

我不知道這個答案是完全潔淨，但它是我能想出的是並沒有要求我修改dc.js本身是最好的。所以我最終做的是將一個事件監聽器附加到頁面上，並在過濾器圖表中監聽點擊事件。一旦點擊事件觸發，它會檢查是否定義了範圍。如果不是，我們假設你正在清理並重繪。

document.addEventListener('click', function(event){ 
    event.path.forEach(function(d){ 
     if (d.id == "volume-focus-left") { 

     if (leftFocusChart.filter() === null) { 
      console.log("Left Cleared"); 
      dc.redrawAll('l'); 
     } 

     } else if (d.id == "volume-focus-right") { 
     if (rightFocusChart.filter() === null) { 
      console.log("Right Cleared"); 
      dc.redrawAll('r'); 
     } 
     } 
    }); 
});