0

I am using this working code as a starter. I am trying to modify according to my data and need.

The only thing I ain't getting is why this zoom in zoom out not working. I tried this solution but got no luck.

I ain't able to find where the problem is within the code but I can see the comment where it stated that the functionality is deactivated. How can I make it activated? Sorry if this is a silly question I am still a newbie in js. There are similar questions too but the thing is jsfiddle are not working anymore so I can't see the whole code to understand the logic.

// Zoom functionnality is desactivated (user can use browser Ctrl + mouse wheel shortcut)
function zoomAndDrag() {
    //var scale = d3.event.scale,
    var scale = 1,
        translation = d3.event.translate,
        tbound = -height * scale,
        bbound = height * scale,
        lbound = (-width + margin.right) * scale,
        rbound = (width - margin.left) * scale;
    // limit translation to thresholds
    translation = [
        Math.max(Math.min(translation[0], rbound), lbound),
        Math.max(Math.min(translation[1], bbound), tbound)
    ];
    d3.select('.drawarea')
        .attr('transform', 'translate(' + translation + ')' +
              ' scale(' + scale + ')');
}

Here is the working demo with the code: https://blockbuilder.org/ninjakx/2c4e726a531b40f9f09d7df41217d1de

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Pygirl
  • 12,969
  • 5
  • 30
  • 43

1 Answers1

0

D3 uses the Mouse Wheel event for zoom in/out functionality. Your sample disables the mouse wheel event in this line:

d3.select('#tree-container').select('svg').on(mouseWheelName, null);

Also, the demo uses version 3 of D3, I strongly recommend to use the latest version of the library (V5).

Michael Rovinsky
  • 6,807
  • 7
  • 15
  • 30
  • If I remove or comment that out. Still it won't work. I tried removing those two null settings. But didn't work. That's why asked here on SO – Pygirl Apr 20 '20 at 16:42
  • Removing this will move the tree diagonally up and down. Got it, this was moving diagonally because `var scale = 1` it should be `var scale = d3.event.scale,`. It was working then also but thought it's not. just checked now. the issue was with scaling too. Thanks for pointing this out. – Pygirl Apr 20 '20 at 16:45