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

[我在docs @ https://dc-js.github.io/dc.js/examples/中浏览了brush和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那样放大它们） ），只需在每个图表上显示选择画笔即可。

（）=画笔选择范围| | =图表

选择画笔之前：图表1-| |图表2-| |图表3-| |

选择画笔后图表1-| （）|图表2-| （）|图表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;

[C0主要是为了防止后端（例如，交叉过滤器）后端太慢而无法响应刷机事件而锁定浏览器。您不希望备份这些事件。

如果您尝试将此解决方案连接到其他图表，可能会发生这种情况。因此，不要接受这个答案，但我确实做了一些工作。

在此，我们禁用该延迟，以防止画笔同步滞后，“后果自负”。

基本上，我们可以绑定debounce in dc.js事件以在其他图表上设置过滤器。我们还需要防止连锁反应，因为每个图表都会依次触发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小提琴示例：