gpt4 book ai didi

javascript - 协调 View /调度事件

转载 作者:行者123 更新时间:2023-11-28 00:51:59 26 4
gpt4 key购买 nike

我正在尝试使用 d3.dispatch 协调多个 View /控件和 Dispatching Events block 来指导我。然而,我遇到了概念上的障碍。考虑以下 View /控件:

  • 国家/地区下拉菜单
  • 每天事件数量的直方图
  • 事件列表

我想要下拉菜单来过滤直方图和列表。然后我想刷直方图来再次过滤列表。换句话说,应该可以回答“向我显示这个国家这些天发生的事件”之类的问题。

问题是,当我使用 d3.dispatch 注册过滤器事件时,直方图会自行过滤。我知道为什么会这样;直方图已注册到过滤器事件,但不知道它本身是否触发了该事件。我无法弄清楚将下拉列表链接到直方图和列表以及将直方图链接到列表的合理模式。每个 View 都应该有一个过滤器事件吗?然后我应该根据需要将每个 View 注册到其他 View 吗?

以下代码片段可能有助于澄清问题。为简单起见,我用按钮替换了直方图:

var dispatch = d3.dispatch('load', 'filter');

dispatch.on('filter.histogram', function() {

console.log('filter.histogram');

});

dispatch.on('filter.list', function() {

console.log('filter.list');

});

dispatch.on('load', function() {

console.log('load');

d3.select('select').on('change', function() {
dispatch.filter();
});

d3.select('button').on('click', function() {
dispatch.filter();
});

});

dispatch.load();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<html>

<body>

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

<button>Histogram</button>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

</body>

最佳答案

这种同步的一般方法是 View (直方图和下拉列表)不知道如何过滤数据,也不知道彼此之间的情况。它们分派(dispatch)由创建它们的代码部分(传统上是 Controller ,但不必如此正式)处理的事件。然后,该 Controller 将根据过滤条件(它可以自行维护的条件,或者可以向 View 询问条件)过滤数据来对事件使用react,然后将过滤后的数据返回给两个 View 以进行重新处理。 -使成为。如果不知道如何执行两个 View 的过滤和刷新,则很难更具体地回答。

此外,通常d3.dispatch与结构类型 described here 结合使用,在这种情况下,每个 View 都会实例化自己的调度程序并使用 d3.rebind(myView, dispatcher, 'on')使 on()可供 Controller 订阅的方法。例如,您可以看到它是在 force layout's source code 的第 305 行完成的。 .

关于javascript - 协调 View /调度事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26661391/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com