[PROYECTO] Como hacer un SVG scrollable

[IgnacioMedel]

Hola Profe! Para mi segunda visualización, tengo más elementos de los que mi SVG puede mostrar, entonces pensé que la mejor opción era hacer un scroll dentro el SVG.
Supuestamente es posible (Como dice acá o acá), donde se utiliza el div que contiene el SVG para manejar el scroll.
Pero el problema es que "no se ponen de acuerdo" las soluciones que encuentro: unas me dicen que haga el SVG más grane que el div que lo contiene y así el div manejara el scroll de los elementos, donde en otras se me dice lo contrario. Además, ni una de las dos implementaciones me funciona uwu
¿Usted sabe algo al respecto? ¿Es posible hacer un scrollbar dentro de un SVG D:? Gracias de ante mano!

[Hernan4444]

Hola @IgnacioMedel

La primera solución indicada es la única que he visto, donde justamente haces un SVG más grande que el div. No obstante, esto ya se nos escapa del alcance del curso, dado que ahí implica jugar con propiedades de CSS que se ve más adelante. Por lo tanto, de querer implementar esto de dicha forma, quedaría como desafío del estudiante.

A priori, un error que se me puede ocurrir con esta versión es si el SVG tiene d3.zoom habiltado, dado que ahí puede haber colisión entre el zoom que le hagas al div o al SVG.

Otra opción que se me ocurre ahora aplicando los contenidos del curso es "simular" ese scroll con d3.zoom para hacer panning. Ahí si ya no es algo que se escapa del curso dado que estamos aplicando los contenidos del curso. En tal caso, solo habría que definir un extent del mismo ancho que translateExtent , pero que el largo de translateExtent sea muuuucho más. Eso te permitirá mover la "mira" del zoom hacia arriba y hacia abajo como si fuera scroll.

Aquí hay un ejemplo donde primero te tienez que acercar, y luego si mantienes presionado el mouse y lo mueves, la visualización se puede desplazar, en la dirección que quieras. Eso podrías intentar, pero no se tendría un scrollbar, sino que solo se ocuparía el mouse en cualquier parte de la visualización.

De todas formas, el proyecto no solicita generar SVG scrolleables, así que dejaría eso como feature final, con el fin de priorizar aquellos elementos que si o si se piden implementar y evaluar.

Saludos!