在每个节点都有多个标签的D3树中,要“知道”正在单击的位置,可以通过以下步骤实现:
on
方法来为节点绑定事件监听器,例如:node.on("click", handleClick);
handleClick
中,可以通过D3提供的事件对象来获取单击事件的相关信息,包括单击的位置。可以使用d3.event
来访问事件对象,例如:function handleClick() {
var clickedNode = d3.select(this); // 获取被单击的节点
var clickedPosition = d3.mouse(this); // 获取单击的位置,相对于当前节点的坐标系
// 其他处理逻辑...
}
d3.select
和d3.transform
方法来实现坐标转换,例如:function handleClick() {
var clickedNode = d3.select(this); // 获取被单击的节点
var clickedPosition = d3.mouse(this); // 获取单击的位置,相对于当前节点的坐标系
// 将单击的位置转换为相对于根节点的坐标
var transform = d3.transform(clickedNode.attr("transform"));
var rootPosition = [
clickedPosition[0] + transform.translate[0],
clickedPosition[1] + transform.translate[1]
];
// 其他处理逻辑...
}
通过以上步骤,你可以在每个节点都有多个标签的D3树中“知道”你正在单击的位置,并进行相应的处理。请注意,以上代码示例中的node
表示D3树中的节点,你需要根据实际情况进行相应的修改和适配。
领取专属 10元无门槛券
手把手带您无忧上云