Disabling D3-Zoom on ForeignObject to enable scrolling inside

[silvanm]

I'm using D3.js to create an SVG element with zoom functionality. Inside this SVG, I also have a foreignObject that contains an HTML div. I would like to be able to scroll the content inside this div.

Here's some simplified example code to illustrate the setup:

const svg = d3.select("body").append("svg")
    .attr("width", 800)
    .attr("height", 600);

const zoom = d3.zoom().on("zoom", zoomed);

svg.call(zoom);

function zoomed(event) {
  // Zoom logic here
}

const fo = svg.append("foreignObject")
    .attr("width", 200)
    .attr("height", 200)
    .append("xhtml:div")
    .attr("class", "scroll-div")
    .style("overflow", "auto");

// Add content to the div

I've tried to disable the zoom on the foreignObject using D3's .on method like so:

d3.select('foreignObject')
  .on('mousedown.zoom', null)
  .on('touchstart.zoom', null)
  .on('touchmove.zoom', null)
  .on('touchend.zoom', null);

However, this doesn't seem to work. The foreignObject still doesn't allow me to scroll the content inside the div.

Does anyone have any ideas on how to disable the D3 zoom specifically for the foreignObject so that I can scroll its content?

[Fil]

Here's a suggestion: https://observablehq.com/@recifs/zoom-and-foreignobject

[silvanm]

Thanks, Fil. I appreciate your answer a lot. I understand that the key to the solution is to have the foreignObject not as child of the g element.
I'd prefer if the foreignObject would be affected by the zoom.transform as well. But I see that I can probably achieve that via a different approach.

[Fil]

in that case the fo needs its own g parent that will receive the same transform?

[silvanm]

I implemented this solution here: https://observablehq.com/d/e29c51a9233cd1dc