d3-dispatch
调度是一种低级交互机制,允许你注册命名回调,然后使用任意参数调用它们。各种 D3 交互组件(例如 d3-drag)使用 dispatch 向监听器触发事件。可以将其视为 EventTarget,只不过每个监听器都有一个明确定义的名称,因此可以轻松删除或替换它们。
¥Dispatching is a low-level interaction mechanism that allows you to register named callbacks and then call them with arbitrary arguments. A variety of D3 interaction components, such as d3-drag, use dispatch to emit events to listeners. Think of this as EventTarget except every listener has a well-defined name so it’s easy to remove or replace them.
例如,要创建开始和结束事件的调度:
¥For example, to create a dispatch for start and end events:
const dispatch = d3.dispatch("start", "end");
然后,你可以使用 dispatch.on 为这些事件注册回调:
¥You can then register callbacks for these events using dispatch.on:
dispatch.on("start", callback1);
dispatch.on("start.foo", callback2);
dispatch.on("end", callback3);
然后,你可以使用 dispatch.call 或 dispatch.apply 调用所有启动回调:
¥Then, you can invoke all the start callbacks using dispatch.call or dispatch.apply:
dispatch.call("start");
与 function.call 类似,你也可以指定 this
上下文和任何参数:
¥Like function.call, you may also specify the this
context and any arguments:
dispatch.call("start", {about: "I am a context object"}, "I am an argument");
dispatch(...types)
源代码 · 为指定的事件类型创建一个新的调度。每个类型都是一个字符串,例如 "start"
或 "end"
。
¥Source · Creates a new dispatch for the specified event types. Each type is a string, such as "start"
or "end"
.
dispatch.on(typenames, callback) {#dispatch_on}
源代码 · 添加、移除或获取指定类型名的回调。如果指定了回调函数,则会为指定的(完全限定的)类型名注册该函数。如果已为给定的类型名注册了回调,则会在添加新的回调之前删除现有回调。
¥Source · Adds, removes or gets the callback for the specified typenames. If a callback function is specified, it is registered for the specified (fully-qualified) typenames. If a callback was already registered for the given typenames, the existing callback is removed before the new callback is added.
指定的类型名称是一个字符串,例如 start
或 end.foo
。类型后面可以可选地跟一个句点 (.
) 和一个名称;可选名称允许注册多个回调以接收相同类型的事件,例如 start.foo
和 start.bar
。要指定多个类型名称,请使用空格分隔类型名称,例如 start end
或 start.foo start.bar
。
¥The specified typenames is a string, such as start
or end.foo
. The type may be optionally followed by a period (.
) and a name; the optional name allows multiple callbacks to be registered to receive events of the same type, such as start.foo
and start.bar
. To specify multiple typenames, separate typenames with spaces, such as start end
or start.foo start.bar
.
要删除给定名称 foo
的所有回调,请使用 dispatch.on(".foo", null)
。
¥To remove all callbacks for a given name foo
, say dispatch.on(".foo", null)
.
如果未指定回调,则返回指定 typenames 的当前回调(如果有)。如果指定了多个 typename,则返回第一个匹配的回调。
¥If callback is not specified, returns the current callback for the specified typenames, if any. If multiple typenames are specified, the first matching callback is returned.
dispatch.copy() {#dispatch_copy}
源代码 · 返回此调度对象的副本。对此调度的更改不会影响返回的副本,反之亦然。
¥Source · Returns a copy of this dispatch object. Changes to this dispatch do not affect the returned copy and vice versa.
dispatch.call(type, that, ...arguments) {#dispatch_call}
源代码 · 与 function.call 类似,调用每个已注册的指定类型的回调,并将指定的 ... 参数传递给回调,并将其作为 this
上下文。有关更多信息,请参阅 dispatch.apply。
¥Source · Like function.call, invokes each registered callback for the specified type, passing the callback the specified ...argument, with that as the this
context. See dispatch.apply for more information.
dispatch.apply(type, that, arguments) {#dispatch_apply}
源代码 · 与 function.apply 类似,调用每个已注册的指定类型的回调,并将指定的参数传递给回调,并将其作为 this
上下文。例如,如果你想在处理原生点击事件后分派自定义回调,同时保留当前 this
上下文和参数,你可以这样写:
¥Source · Like function.apply, invokes each registered callback for the specified type, passing the callback the specified arguments, with that as the this
context. For example, if you wanted to dispatch your custom callbacks after handling a native click event, while preserving the current this
context and arguments, you could say:
selection.on("click", function() {
dispatch.apply("custom", this, arguments);
});
你可以将任何你想要的参数传递给回调函数;最常见的情况是,你可以创建一个表示事件的对象,或者传递当前数据 (d) 和索引 (i)。有关更多信息,请参阅 function.call 和 function.apply。
¥You can pass whatever arguments you want to callbacks; most commonly, you might create an object that represents an event, or pass the current datum (d) and index (i). See function.call and function.apply for further information.