在 dc.js 交叉过滤器中的两个不同浏览器窗口中的两个不同图形之间进行交互答案

【问题标题】：interact between two different graphs in two different browser windows in dc.js crossfilter在 dc.js 交叉过滤器中的两个不同浏览器窗口中的两个不同图形之间进行交互
【发布时间】：2023-03-28 19:56:02
【问题描述】：

我创建的 dc.js 可视化有四个不同的条形图。此外，每个图表都有一个按钮，可以在新的浏览器窗口中打开该特定图表。为此，我为每个图表创建了单独的 HTML 文件。我想在两个不同窗口中打开的图表之间进行交互。是否可以？怎么样？

谢谢！

【问题讨论】：

标签： javascript d3.js dc.js

【解决方案1】：

window.opener 将返回对打开它的窗口的窗口对象的引用。

在第一个窗口中，您可以为您需要操作的任何对象保留一个全局引用（比如var graphThing 或window.graphThing）。然后，从原窗口启动的窗口可以调用window.opener.graphThing访问第一个窗口的graphThing。

要从打开子窗口的父窗口访问子窗口的属性（比如全局var childGraphThing 或window.childGraphThing），您可以通过如下方式打开子窗口来保留对子窗口的引用：

var childWindow = window.open('childGraph.html', 'blank_');

然后，您可以像这样访问它的属性：

var childWindowGraphThing = childWindow.childGraphThing;

【讨论】：

此外，您需要从第一个窗口获取的特定属性是 dc 实例（为了加入相同的图表组并接收事件）和 crossfiliter 实例（为了共享数据）。您可能需要将交叉过滤器实例显式写入窗口属性，以便从第二个窗口中获取它。在第二个窗口中加载 dc.js 可能会使事情变得混乱；相反，您应该只做window.dc = window.opener.dc;