Estoy tratando de implementar la panorámica, el zoom y el desplazamiento con barras de desplazamiento.

Tengo dos problemas con la combinación de zoom, panorámica y barras de desplazamiento:

1. Desplazar/arrastrar el svg está funcionando con barras de desplazamiento en movimiento, cuando desplaza/arrastra el gráfico->desplazarse con las barras de desplazamiento->desplazarse/arrastrar con el cursor en svg, va a la posición anterior donde se realizó el último desplazamiento/arrastre. 2. La barra de desplazamiento con zoom no funciona de maravilla, cuando hace zoom->desplazamiento->zoom, se acerca a la ubicación anterior donde ocurrió el primer zoom.

cómo implementar estas líneas "wrapper.call(d3.zoom().translateTo, x/scale, y/scale);" en d3.v3. Sería de gran ayuda si alguien muestra la solución para implementar en d3 versión 3. El siguiente código es para hacer zoom, desplazarse y desplazarse.

 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); }