Stack Exchange
Disable zoom but retrieve scroll on foreignObject
I am using d3.js + AngularJS to create a tree.
The tree is zoomable, a behaviour I achieved doing the following (as recomended in the doc - please note I am using v3 : https://devdocs.io/d3~3/zoom-behavior.md#zoom) :
let zoom = d3.behavior.zoom()
    .scaleExtent([.5, 2])
    .on("zoom", function() {
        svg.attr("transform",  "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
    });

svg = d3.select(".tree-div")
    .append("svg")
    .call(zoom)
    .append("g");

Recently, I added tooltips on nodes of my tree. The tooltips are generated in an Angular directive.
d3.selectAll(".tree-node").append("g")
    .classed("tree-node-tooltip", true)
    .call(function() {
         $compile(this[0])($scope);
    });

These tooltips are composed of a bar chart + a foreignObject that should be a scrollable div. However I never managed to have the foreignObject drop the zooming behaviour and retrieve the scrolling one.
I saw a few posts stating similar problems, but none of the solutions I found worked for me. I tried the following:
Disabling the zoom directly on the tooltips
Using a variety of :

.("zoom", null)
.(".zoom", null)
.("wheel.zoom", null)
.("mousewhell.zoom", null)

after .attr("classed", "tree-node-tooltip"). The zooming behaviour is maintained.
Filter on the zoom handler
.on("zoom", function() {
    if (mouse is over tooltip) {
        return;
    }
    svg.attr("transform",  "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});

This disables the zooming but also the native scrolling.
I also tried to stop propagation of event (on zoom, on zoomstart), no effect (zooming remained).
Do you have any idea how I could do this? I am completely stuck here. Any help would be much appreciated, thank you.

Have you tried stopping the event to propagate on tooltips? ...call(...).on("wheel", function() { d3.event.preventDefault(); })

I assumes you meant d3.event.stopPropagation... and it worked, thank you so much! Amazing how only a few lines of code can change a lot.I thought I had done this, guess I did not put is on the right spot...
You should publish an answer so that I can accept it :)

Added the answer. Thank you

You can add a listener for on a D3 Selection where you can stop the event propagation as such:
d3
 .selectAll(...)
 .call(...)
 .on("wheel", 
    function() { 
        d3.event.stopPropagation();
    })


d3.event.preventDefault(); should not be there though, as it would prevent default action on mousewheel - scrolling.
