Question

我正在尝试使用d3.dispatch和Dispatching Events块来协调多个视图/控件以指导我。但是，我遇到了一个概念上的障碍。请考虑以下视图/控件：

国家/地区下拉
每日事件数量的直方图
活动清单

我想要下拉菜单来过滤直方图和列表。然后，我想刷直方图再次过滤列表。换句话说，应该可以回答诸如“向我展示这个国家的事件”这样的问题。

问题在于，当我使用d3.dispatch注册过滤器事件时，直方图会自行过滤。我知道为什么会这样;直方图在过滤器事件中注册，但不知道它是否自己触发了此事件。我无法弄清楚的是将下拉列表与列表和列表相关联的合理模式，以及列表中的直方图。每个视图都应该有过滤事件吗？我是否应该根据需要将每个视图注册到其他视图？

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

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>

Answer 1

这种同步的一般方法是视图（历史图和下拉列表）对如何过滤数据或彼此之间一无所知。他们调度由创建它们的代码部分处理的事件（传统上是控制器，但它不必如此正式）。然后，该控制器将根据过滤条件对数据做出反应 - 过滤标准可以自行维护，也可以向视图询问标准，然后将过滤后的数据反馈给两个视图。 -render。如果不知道如何执行过滤和刷新两个视图，就很难回答它。

此外，通常d3.dispatch与结构类型described here一起使用，在这种情况下，每个视图都会实例化自己的调度程序，并使用d3.rebind(myView, dispatcher, 'on')来生成on() {1}}控制器可以订阅的方法。例如，您可以在force layout's source code的第305行看到它已完成。

协调视图/调度事件

1 个答案: