dc.js

Question

dc.js https://dc-js.github.io/dc.js/ is an extension of d3.js that has some extra UI features like the brush feature where user's can select a range by click dragging on the chart - https://dc-js.github.io/dc.js/examples/scatter-series.html

我正在查看以下示例：https://dc-js.github.io/dc.js/examples/ and the brush in docs @ http://dc-js.github.io/dc.js/docs/html/dc.coordinateGridMixin.html#brushOn__anchor 并且想知道是否有办法在具有相同域的多个图表之间镜像画笔？

我希望有几个系列图表相互堆叠，当用户 select 使用画笔绘制一个范围时，它会 select 所有 3 个图表上的一个范围（不是缩放在它们上面，例如多焦点图表示例 https://dc-js.github.io/dc.js/examples/multi-focus.html) 只需在每个图表上显示 selection 刷。

( ) = 刷 select离子范围 | | = 图表

刷前select离子：

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

刷后selection

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）响应刷新事件太慢时锁定浏览器。您不希望这些事件备份。

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

这里我们禁用延迟以防止画笔同步滞后，"at our peril"。

基本上我们可以绑定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标志，会进入死循环，导致页面崩溃。）

同样，当与其他图表或真实数据连接时，这可能会运行出现性能问题。我不确定这是否可以在不更改库的情况下正确完成 - 上述问题描述了需要什么。

示例 fiddle：https://jsfiddle.net/gordonwoodhull/Lnz7c36e/19/

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

dc.js - How to mirror brush across multiple charts?