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

【问题标题】：dc.js - How to mirror brush across multiple charts?dc.js - 如何跨多个图表镜像画笔？
【发布时间】：2019-12-23 21:33:54
【问题描述】：

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 中的 brush，想知道是否有办法在具有相同域的多个图表中镜像画笔？

我希望有几个系列图表堆叠在一起，当用户用画笔选择一个范围时，它会在所有 3 个图表上选择一个范围（不像多焦点图表示例 @987654325 那样放大它们@) 只在每个图表上显示选择画笔。

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

画笔选择前：

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

画笔选择后

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

【问题讨论】：

标签： dc.js

【解决方案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 主要用于防止在后端（例如交叉过滤器）太慢而无法响应刷机事件时锁定浏览器。您不希望这些事件备份。

如果您尝试将此解决方案连接到其他图表，这可能会发生。所以请随意不要接受这个答案，但我确实得到了一些工作。

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

基本上我们可以绑定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/

【讨论】：