Resumen del gráfico organizacional utilizando D3 en Angular

En este artículo se aborda la implementación de un gráfico organizacional en Angular 16 utilizando D3 v7.9.0 y D3-org-chart v3.1.1. Se reporta un problema al intentar agregar funciones de acercamiento y alejamiento, ya que el gráfico desaparece al ejecutar estas funciones.

Problema

Al implementar el zoom en el gráfico organizacional, el gráfico se oculta al aplicar estas funciones. Los desarrolladores enfrentan dificultades para establecer las limitaciones de zoom.

Solución Propuesta

1. Configuración del Zoom

Se propone ajustar la implementación del zoom en el contenedor del gráfico para evitar que el gráfico desaparezca. Para ello, se deben tomar en cuenta las siguientes configuraciones:

const zoom: any = d3
    .zoom<SVGSVGElement, any>()
    .scaleExtent([1, 3])  // Se ajusta el rango de zoom entre 1 y 3
    .on('zoom', (event: any) => {
        chartContainer.attr('transform', event.transform);  // Aplica la transformación del zoom al contenedor
    });

Asegúrate de que el contenedor del gráfico esté correctamente inicializado, y llama a la función de zoom en el contenedor del gráfico.

2. Asegurar las Dimensiones del Contenedor

Verifica que el contenedor del gráfico tenga dimensiones definidas para que el gráfico no se vuelva invisible:

::ng-deep svg.svg-chart-container {
    height: 100vh !important;  // Asegura que el contenedor tenga una altura adecuada
    width: 100vw !important;   // Asegura que el contenedor tenga un ancho adecuado
}

3. Ampliar el Rango de Escala del Zoom

Puedes ampliar el rango de escalado del zoom si deseas permitir un acercamiento y alejamiento más pronunciado:

.scaleExtent([0.5, 5])  // Permite acercar hasta un 50% y alejar hasta un 500%

Conclusión

Siguiendo estos pasos, la implementación de zoom en el gráfico organizacional debería funcionar adecuadamente sin que el gráfico desaparezca. Asegúrate de que las dimensiones del contenedor están bien establecidas y ajusta las limitaciones del zoom según tus necesidades. Esto permitirá una mejor visualización y exploración del gráfico organizacional creado.