Tengo un SVG que importé usando d3.xml y estoy tratando de acercar cuando hice clic en uno de los puntos suspensivos en mi SVG. Esto casi funciona, aunque me falta alguna funcionalidad para ubicar los elementos cuando cambia el tamaño del SVG. Aquí está el código que estoy usando para hacer zoom:
svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(widthContainer/2 , heightContainer/2) .scale(2) .translate(-d3.select(this).attr('cx'), -d3.select(this).attr('cy')), d3.pointer(event, svg.node()) ); Esto funciona cuando el tamaño de la ventana del navegador representa el tamaño en el que se creó el svg, porque los valores cx y cy de los puntos suspensivos se pueden usar para ubicarlos, aunque cuando aumento el tamaño de la ventana del navegador esto, por supuesto, no ya no funciona porque los valores cx y cy ahora están muy lejos. ¿Cómo puedo centrar y acercar un elemento independientemente del contexto actual? Supongo que hay una manera de averiguar la escala actual del div principal y luego calcular los parámetros de traducción a partir de ahí, pero no he encontrado nada después de un par de horas de intentarlo.
Encontré una solución a mi problema, mi mayor error fue suponer que para que mi mapa respondiera, necesitaría actualizar mis vars widthContainer y heightContainer (que se usan para hacer cálculos en mi código para la posición del zoom, etc.) con la ventana gráfica actual ancho cuando la página está cargada y en el cambio de tamaño. Esto introdujo un montón de comportamientos muy extraños y me llevó a pasar horas depurando errores que podrían haberse evitado.
La solución para hacer que un mapa con funciones de zoom responda es tener estos dos vars establecidos en valores fijos. Si está utilizando un SVG que está leyendo como xml con d3, utilice los valores que se establecen en el atributo viewbox del SVG, por ejemplo, viewBox="0 0 657.58 344.67" .
Luego, puede manejar su contenedor, donde se encuentra su elemento SVG, como de costumbre en css y establecer su ancho al 100% o lo que desee, y el mapa debería actuar de manera receptiva. Soy un novato total en d3 y JS, por lo que este comportamiento no me pareció lógico, especialmente porque la documentación sobre zoomIdentity de d3 es muy pobre. Para los usuarios regulares de d3, esto probablemente parezca obvio, pero espero que esto llegue a los principiantes de d3.