Migrar nvd3 / angular-nvd3 / D3 directives a Angular moderno
angular-nvd3 envolvía NVD3, un conjunto de gráficos reutilizables construidos sobre D3 versión 3, en una directiva nvd3 configurada con un objeto de opciones. Muchas apps tenían además directivas de D3 escritas a mano. NVD3 no funciona con las versiones actuales de D3.
Qué la reemplaza
| Opción | Cuándo elegirla |
|---|---|
| D3 directly in a component | Para visualizaciones propias: Angular es dueño del componente y D3 se encarga de escalas, figuras y ejes. |
| ngx-charts | Gráficos declarativos para Angular construidos sobre módulos de D3; cubre los gráficos comunes de líneas, barras, circulares y de área. |
| ngx-echarts (Apache ECharts) | Cuando necesitas muchos tipos de gráfico, grandes volúmenes de datos o renderizado en canvas. |
Cómo migrarla
- Separa los gráficos estándar (líneas, barras, circulares) de las visualizaciones D3 realmente propias.
- Lleva los gráficos estándar a una librería de gráficos y deja en D3 solo los propios.
- Porta el código D3 propio a la API modular actual, renderízalo cuando la vista esté lista y limpia al destruir el componente.
Cuidado con. D3 cambió mucho después de la versión 3: d3.scale.linear pasó a ser d3.scaleLinear, y las selecciones pasaron a ser inmutables. El código viejo de las directivas no corre sin cambios, así que presupuesta una adaptación del código, no una copia.
Otras librerías
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn