DC.js range/focus charts not behaving correctly
<p>I have two area charts that have a range selection below them. I want each range selection to only interact with it's respective graph. Now defining the graphs like the following I get that sort of behavior however when I clear the selection with a single click on the range chart the brush disappears but the selection remains. Is there some setup I'm doing incorrectly? Or would it be better just to define a custom action to happen on brush clear? </p>

<pre><code> 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"));
</code></pre>