如何在 d3 中将事件从一个元素传递到另一个元素？

Question

我在一个矩形元素前面有一个文本元素。 rect 元素响应 wheel 事件，以便可以滚动。文本元素响应 drag 事件，以便可以移动它。

当鼠标指针在文本元素上时，它会阻止 rect 元素获取 wheel 事件。

我无法在文本元素上将 pointer-events 设置为 none，因为它还需要响应单击和拖动。

当在文本元素上检测到 wheel 事件时，是否有办法将其传递给矩形元素？

我查看了调度函数，但我不想创建新事件。我只是想把这个事件传递下去。

当文本元素获得 wheel 事件时调用 rect 元素的事件处理程序似乎可行。这需要调用不相关对象的方法，所以我想避免它。

这里是一些简化的代码：

var container = d3.create("svg:g")

var rectElem = container.append("rect")
 .on("wheel",handleScroll)

var textElem = container.append("text")
 .call(d3.drag().on("drag",handleDrag))
 .on("wheel",(e)=>{ 
   // How to send event to rect element ?
 })

Answer 1

从 which points to 答案中得出。

有两种方法可以做到这一点。

选项 1

可以将 wheel 事件处理移至容器元素，以便它从其中的矩形元素和文本元素冒泡。

var container = d3.create("svg:g")
 .on("wheel",handleScroll)

var rectElem = container.append("rect")

var textElem = container.append("text")
 .call(d3.drag().on("drag",handleDrag))

选项 2

文本元素接收到的事件可以被克隆并分派给矩形元素。（必须克隆，不能重复使用同一个事件）

var container = d3.create("svg:g")

var rectElem = container.append("rect")
.on("wheel",handleScroll)

var textElem = container.append("text")
 .call(d3.drag().on("drag",handleDrag))
 .on("wheel",(e)=>{rectElem.node().dispatchEvent(new WheelEvent(e.type,e))})

如何在 d3 中将事件从一个元素传递到另一个元素？

How to pass an event from one element to another in d3?

javascript

d3.js