Question

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

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

当我在LineChart上启用它时，这不会发生。

以下是一个简单示例：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过滤，它不知道这些二维＆＃34;多键＆＃34;。

可能由于系列图需要这种输入，它应该重新定义过滤器处理程序以处理多键。但在此之前，您可以通过提供自己的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使用的密钥部分是否在范围内（而不是将数组与范围进行比较，这将始终返回false）。

Here's a working fork of your codepen.

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

dc.js用于seriesChart的奇怪的鼠标缩放

1 个答案: