I am trying to implement panning, zooming and scrolling with scroll bars.

I have two problems with zoom,pan and scroll bars combination:

1.pan/drag the svg is working with moving scrollbars, when you pan/drag the chart->scroll with scrollbars->pan/drag with cursor on svg, It goes to old position where last pan/drag is performed. 2.Scrollbar with zoom is not working wonders, when you zoom->scroll->zoom it zooms at the old location where the first zoom happened.

how to implement this lines "wrapper.call(d3.zoom().translateTo, x / scale, y / scale);" in d3.v3. It would be great help if anyone shows the solution to implement in d3 version 3. below code is for zooming, panning and scrolling.

   function zoomed() {
    
  var scale = d3.event.scale;
  const scaledWidth = (newWidth+1000) * scale;
  const scaledHeight = height * scale;

  // Change SVG dimensions.
  d3.select('#hierarchyChart svg')
    .attr('width', scaledWidth)
    .attr('height', scaledHeight);

  // Scale the image itself.
  d3.select('#hierarchyChart svg g').attr('transform', "scale("+scale+")");

  // Move scrollbars.
  const wrapper = d3.select('#hierarchyChart')[0];
  if(d3.event.translate >= [0,0] && d3.event.translate <=[scaledWidth,scaledHeight]){
  wrapper[0].scrollLeft = -d3.event.translate[0];
  wrapper[0].scrollTop = -d3.event.translate[1];
  }
  console.log(wrapper[0].scrollLeft);
      console.log(wrapper[0].scrollTop);

  // If the image is smaller than the wrapper, move the image towards the
  // center of the wrapper.
  const dx = d3.max([0, wrapper[0].clientWidth/ 2 - scaledWidth / 2]);
  const dy = d3.max([0, wrapper[0].clientHeight / 2 - scaledHeight / 2]);
 // d3.select('svg').attr('transform', "translate(" + dx + "," + dy + ")");
}

function scrolled() {
    
      const x = wrapper[0].scrollLeft + wrapper[0].clientWidth / 2;
     const y = wrapper[0].scrollTop + wrapper[0].clientHeight / 2;
    
      const scale = d3.event.scale;
      // Update zoom parameters based on scrollbar positions.
     // wrapper.call(d3.zoom().translateTo, x / scale, y / scale);
    }