score:2

Accepted answer

Figured it out from altocumulus' comment which points to this answer.

There are two ways to do this.

Option 1

The wheel event handling can be moved to the container element so that it bubbles up from both the rect element and the text element that are inside it.

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))

Option 2

The event received by the text element can be cloned and dispatched to the rect element. (It has to be cloned. The same event can't be reused).

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))})

Related Query

More Query from same tag