dc.js -如何跨多个图表镜像画笔？

Question

dc.js https://dc-js.github.io/dc.js/是d3.js的扩展，它具有一些额外的UI功能，如画笔功能，用户可以通过单击拖动图表来选择范围- https://dc-js.github.io/dc.js/examples/scatter-series.html

我浏览了https://dc-js.github.io/dc.js/examples/和docs @ http://dc-js.github.io/dc.js/docs/html/dc.coordinateGridMixin.html#brushOn__anchor上的示例，想知道是否有一种方法可以在具有相同域的多个图表之间镜像画笔？

我希望有几个系列图表堆叠在一起，当用户用画笔选择一个范围时，它会在所有3个图表上选择一个范围(而不是像多焦点图表示例https://dc-js.github.io/dc.js/examples/multi-focus.html那样放大它们)，只在每个图表上显示选择画笔。

()=画笔选择范围||=图表

在选择画笔之前：

Chart 1 - |            |
Chart 2 - |            |
Chart 3 - |            |

在画笔选择之后

Chart 1 - |    (     ) |
Chart 2 - |    (     ) |
Chart 3 - |    (     ) |

Answer 1

注意:此解决方案在连接到其他图表或真实数据时会出现问题。

由于需要对所有图表进行通用实现，因此正确的解决方案已停止，请参阅：

https://github.com/dc-js/dc.js/issues/681

https://github.com/dc-js/dc.js/issues/682

我将要介绍的内容的问题在于，它依赖于

dc.constants.EVENT_DELAY = 0;

debounce in dc.js主要是为了防止后端(例如crossfilter)太慢而无法响应刷新事件而锁定浏览器。您不希望备份这些事件。

如果您尝试将此解决方案连接到其他图表，则可能会发生这种情况。所以请不要接受这个答案，但我确实得到了一些有用的东西。

在这里，我们禁用延迟，以防止刷子同步滞后，“由我们承担风险”。

基本上，我们可以将filtered事件与在其他图表上设置过滤器联系起来。我们还需要防止连锁反应，因为每个图表都会依次触发filtered事件。

const charts = [chart1,chart2,chart3,chart4];
let broadcasting = false; // don't repropogate (infinite loop)
for(const chartA of charts)
    chartA.on('filtered', function(chart, filter) {
        if(broadcasting)
            return;
        broadcasting = true;
        for(const chartB of charts.filter(chartB => chartB !== chartA))
            chartB.replaceFilter(filter);
        broadcasting = false;
    })

(如果没有broadcasting标志，它将进入无限循环并使页面崩溃。)

同样，当连接到其他图表或实际数据时，这可能会遇到性能问题。我不确定这是否可以在不更改库的情况下正确完成-上面的问题描述了所需的内容。

​

示例小提琴：https://jsfiddle.net/gordonwoodhull/Lnz7c36e/19/