D3 v6 及更高版本中的事件侦听器有何变化？

了解 D3 v6 中的事件监听器

在 D3 中，事件监听器用于在元素上发生特定事件时触发操作。使用数据绑定元素时，在事件处理期间访问关联数据非常重要。这就是 D3 v5 和 D3 v6 之间事件侦听器模式的变化发挥作用的地方。

D3 v5 和早期版本

在 D3 版本 5 及更早版本中，以下内容使用模式：

selection.on("eventType", function(d, i, nodes) { ... })

这里，d代表触发事件的元素的数据，i是它的索引，nodes是当前的元素组。可以使用 d3.event 在事件侦听器中访问事件信息。

D3 v6 及以上

在 D3 v6 中，模式已修改为：

selection.on("eventType", function(event, d) { ... })

现在，事件作为第一个参数直接传递给监听器，数据是第二个参数。结果，d3.event 全局变量已被删除。

访问数据

检索在 D3 v6 中触发事件的节点的绑定数据，只需在事件监听函数中使用d参数即可。下面更正后的代码演示了这一点：

<code class="js">node.on("mouseover", (event, d) => {
    console.log(d.id);
});</code>

其他显着更改

• 这个：您仍然可以使用 d3。 select(this) 可以访问事件监听函数中的当前元素，但使用箭头函数时，其范围可能会有所不同。
• 定位： 获取触发事件的 x 和 y 位置相对于 SVG，使用 d3.pointer(event) 而不是 d3.mouse(this)。
• 事件属性： 事件现在直接公开其属性，而不是通过 d3.event。例如，event.x 和 event.y 替换 d3.event.x 和 d3.event.y。

以上是D3 v6 及更高版本中的事件侦听器有何变化？的详细内容。更多信息请关注PHP中文网其他相关文章！