在 D3 v6 中,如何在鼠标悬停事件期间获取节点数据
在 D3 v6 及更高版本中,通过选择检索节点的绑定数据。 on() 与以前的版本不同。该数据不再接收鼠标事件数据,而是成为传递给事件监听器的第二个参数。
D3v5 和早期
之前,D3 中的事件监听器遵循以下模式:
selection.on("eventType", function(d, i, nodes) { .... })
其中:
可以使用 d3.event 访问事件相关的数据。
D3v6
使用 D3v6,模式已更改to:
selection.on("eventType", function(event, d) { .... })
现在直接将事件对象作为第一个参数传递,而数据作为第二个参数。因此 d3.event 已被弃用。
访问数据
要检索鼠标悬停目标的数据:
node.on("mouseover", (event, d) => { console.log(d); });
确定事件位置
在 D3v5 中,您可以使用 d3.mouse(this) 来获取事件的 x,y 位置。在 D3v6 中,使用:
d3.pointer(event);
示例
以下示例演示在鼠标悬停事件期间获取数据和事件位置:
const data = [ { "id": "Myriel", "group": 1 }, { "id": "Napoleon", "group": 1 } ]; const nodes = svg.append("g") .selectAll("circle") .data(data) .join("circle") ...; node.on("mouseover", (event, d) => { console.log(d.id); console.log(d3.pointer(event)); });
以上是D3 v6中如何在鼠标悬停事件期间抓取节点数据?的详细内容。更多信息请关注PHP中文网其他相关文章!