Javascript 协调视图/调度事件

我正在尝试使用和块来协调多个视图/控件。然而，我遇到了一个概念上的障碍。考虑以下视图/控件：

• 国家的下拉列表
• 每天事件数量的柱状图
• 事件清单

我想要下拉列表来过滤直方图和列表。然后我想刷一下直方图，再次过滤列表。换句话说，应该可以回答这样的问题：“让我看看这个国家最近发生的事情”

问题是，当我用

d3.dispatch

注册过滤事件时，直方图会自动过滤。我知道为什么会这样；直方图已注册到筛选器事件，但不知道它是否触发了此事件本身。我搞不懂的是一个合理的模式，用于将下拉列表链接到直方图和列表，以及将直方图链接到列表。每个视图都应该有一个过滤器事件吗？然后我是否应该根据需要将每个视图注册到另一个视图

下面的代码片段可能有助于澄清这个问题。为简单起见，我将直方图替换为一个按钮：

var dispatch=d3.dispatch（'load'，'filter'）；
dispatch.on（'filter.histogram'，function（）{
log（'filter.histogram'）；
});
dispatch.on（'filter.list'，function（）{
console.log（'filter.list'）；
});
dispatch.on（'load'，function（））{
console.log（'load'）；
d3.选择（'select'）。打开（'change'，function（）{
dispatch.filter（）；
});
d3.选择（'button'）。在（'click'，function（）上{
dispatch.filter（）；
});
});
dispatch.load（）

选择1
选择2
选择3
直方图

项目1
项目2
项目3

这种同步的一般方法是，视图（直方图和下拉列表）不知道如何过滤数据，也不知道彼此之间的信息。它们分派由创建它们的代码部分处理的事件（传统上是控制器，但不必如此正式）。然后，该控制器将根据过滤条件过滤数据，从而对事件作出反应。过滤条件是它自己维护的，或者它可以向视图请求这些条件。然后，它将过滤后的数据返回给两个视图以重新渲染。在不知道如何执行过滤和刷新这两个视图的情况下，很难回答更具体的问题

此外，通常
d3.dispatch
与结构类型结合使用，在这种情况下，每个视图都将实例化自己的dispatcher，并使用
d3.rebind（myView，dispatcher，'on'）
使
on（）
方法可供控制器订阅。例如，您可以在的第305行看到它正在完成。
每个视图都可以访问原始的事件数组，然后每个视图都会过滤并将其作为参数传递给dispatch.filter（）。我没有在我的代码片段中包含这种行为，因为我对不紧密耦合视图的方法感兴趣。从您的回答来看，我似乎应该研究一种类似MVC的体系结构：正如您所讨论的，d3.dispatch似乎更适合定制事件。