DC.js range/focus 图表表现不正确

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

我不确定这个答案是否完全符合 Kosher，但这是我能想到的最好的答案，不需要我修改 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');
        }
      }
    });
});

DC.js range/focus 图表表现不正确

DC.js range/focus charts not behaving correctly

javascript

d3.js

dc.js