首页 > web前端 > js教程 > D3 v6 及更高版本中的事件侦听器有何变化?

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

Mary-Kate Olsen
发布: 2024-10-24 07:29:01
原创
567 人浏览过

How Did Event Listeners Change in D3 v6 and Beyond?

了解 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中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板