处理事件

为了交互，选择允许监听和分发事件。

selection.on(typenames, listener, options)

源代码 · 为每个选定元素添加或删除指定事件 typenames 的 listener。

d3.selectAll("p").on("click", (event) => console.log(event))

typenames 是一个字符串事件类型，例如 click、mouseover 或 submit；您的浏览器支持的任何 DOM 事件类型 都可以使用。该类型可以可选地后跟一个点 (.) 和一个名称；可选名称允许注册多个回调以接收相同类型的事件，例如 click.foo 和 click.bar。要指定多个类型名，请用空格分隔类型名，例如 input change 或 click.foo click.bar。

当选定元素上分发指定的事件时，将针对该元素评估指定的 listener，并将当前事件 (event) 和当前数据 (d) 传递给它，其中 this 是当前 DOM 元素 (event.currentTarget)。侦听器始终会看到其元素的最新数据。注意：虽然您可以直接使用 event.pageX 和 event.pageY，但通常使用 d3.pointer 将事件位置转换为接收该事件的元素的本地坐标系会比较方便。

如果以前在选定元素上为同一个 typename 注册了事件侦听器，则会在添加新侦听器之前删除旧侦听器。要删除侦听器，请将 null 作为 listener 传递。要删除给定名称的所有侦听器，请将 null 作为 listener 传递，并将 .foo 作为 typename 传递，其中 foo 是名称；要删除没有名称的所有侦听器，请将 . 作为 typename 指定。

可选的 options 对象可以指定事件侦听器的特性，例如它是捕获的还是被动的；请参阅 element.addEventListener。

如果未指定 listener，则返回当前分配给第一个（非空）选定元素上的指定事件 typename 的侦听器（如果有）。如果指定了多个类型名，则返回第一个匹配的侦听器。

selection.dispatch(type, parameters)

源代码 · 按顺序将指定 type 的 自定义事件 分发到每个选定元素。

d3.select("p").dispatch("click")

可以指定一个可选的 parameters 对象来设置事件的附加属性。它可以包含以下字段

• bubbles - 如果为 true，则将事件按相反的树顺序分发给祖先。
• cancelable - 如果为 true，则允许 event.preventDefault。
• detail - 与事件关联的任何自定义数据。

如果 parameters 是一个函数，则会按顺序针对每个选定元素对其进行评估，并将当前数据 (d)、当前索引 (i) 和当前组 (nodes) 传递给它，其中 this 是当前 DOM 元素 (nodes[i])。它必须返回当前元素的参数。

pointer(event, target)

源代码 · 返回一个包含两个数字 [x, y] 的数组，表示相对于指定 target 的指定 event 的坐标。

const [x, y] = d3.pointer(event);

event 可以是 MouseEvent、PointerEvent、Touch 或一个包含 UIEvent 作为 event.sourceEvent 的自定义事件。

如果未指定 target，则默认情况下它将设置为源事件的 currentTarget 属性（如果可用）。如果 target 是 SVG 元素，则使用 逆 屏幕坐标变换矩阵 来转换事件的坐标。如果 target 是 HTML 元素，则相对于 target 的 边界客户区域矩形 的左上角来转换事件的坐标。（因此，坐标系只能相对于客户坐标进行转换。另请参阅 GeometryUtils。）否则，将返回 [event.pageX, event.pageY]。

pointers(event, target)

源代码 · 返回一个包含 [[x0, y0], [x1, y1]…] 的数组，表示指定 event 的指针位置相对于指定 target 的坐标。

const points = d3.pointers(event);

对于触摸事件，返回的位置数组对应于 event.touches 数组；对于其他事件，返回一个单元素数组。

如果未指定 target，则默认情况下它将设置为源事件的 currentTarget 属性（如果可用）。