D3 v5 Zoom Stutter

Question

I am trying to use d3.zoom but there are some issues that I am facing. Below is the simple code that I am using.

var treeGroup = d3.select('.treeGroup');  //parent g element
treeGroup.call(d3.zoom().on('zoom', function() {
    console.log(d3.event.transform);
    treeGroup.attr('transform', d3.event.transform);
}));

JS Fiddle: https://jsfiddle.net/nohe76yd/9/

Below are the issues that I am facing. (Please refer above JS Fiddle for code)

• I can not zoom or pan on tree unless I do it on nodes, text labels or links hence I can not zoom on parent g object.
• There is a stutter when I try to pan by clicking and dragging on nodes, text labels or links
• When I zoom out an try to pan than tree disappears means there is too much translate.

If you have any idea why d3.zoom is behaving like this, please help me with the solution.

Answer 1

Taken from https://stackoverflow.com/a/20072986/6060606 and adapted to this question:

var rootSVG = d3.select('.rootSVG');
var treeGroup = d3.select('.treeGroup');
rootSVG.call(d3.zoom().on('zoom', function() {
    treeGroup.attr('transform', d3.event.transform);
}));

This fixes the jitter and makes the entire SVG "draggable". The excellent explanation as to why this works can be found in the linked SO answer.