dc.js seriesChart 奇怪的鼠标缩放

Question

我想在 seriesChart 上使用鼠标缩放功能，并让它过滤同一组的其他图表。

当我在 seriesChart 上使用 .mouseZoomable(true) 启用缩放并缩放图表时，其他图表变为空。

当我在折线图上启用它时不会发生这种情况。

这是一个简单的例子：https://codepen.io/udeste/pen/ZKeXmX

（用鼠标缩放第二个图表。一切正常。但是当您缩放第一个图表时，其他图表变为空白。）

我做错了什么？这是 dc.seriesChart 错误吗？

Answer 1

这是因为dc.seriesChart要求你提供那个奇怪的维度，但它并没有相应地改变过滤器功能。

您指定的 seriesDimension 是这样的：

  var seriesDimension = ndx.dimension(function(d) {
    return [+d.Expt, +d.Hours];
  });

但是当你缩放时，dc.coordinateGridMixin只是用一个普通的dc.filters.RangedFilter过滤，不知道这些二维"multikeys"。

可能因为系列图表需要这种输入，它应该重新定义过滤器处理程序来处理多键。但在那之前，您可以通过提供自己的 filterHandler:

来解决它

  seriesChart.filterHandler(function(dimension, filters) {
    if(filters.length === 0) // 1
      dimension.filter(null);
    else {
      console.assert(filters.length===1); // 2
      console.assert(filters[0].filterType==='RangedFilter');
      dimension.filter(function(d) { // 3
        return filters[0][0] <= d[1] && d[1] < filters[0][1];
      })
    }
  });

这是做什么的：

检查此事件是否是因为筛选器已被清除，如果是，则清除维度的筛选器。
断言过滤器符合预期。 coordinateGridMixin 将始终提供一个 dc.filters.RangedFilter 但谁知道还会发生什么。
提供一个替代过滤器函数，检查 keyAccessor 使用的键部分是否在范围内（而不是将数组与范围进行比较，后者总是 return 为假） .

Here's a working fork of your codepen.

（顺便说一句，它看起来像这个示例 slams into a known issue，其中图表边缘的线段被丢弃而不是剪裁线段。如果有更多的点，它不会那么糟糕。我不要认为我找到了一个好的解决方法。希望我们能尽快解决这个问题。）

dc.js seriesChart 奇怪的鼠标缩放

dc.js Weird mouse zooming for seriesChart

dc.js