Migrating nvd3 / angular-nvd3 / D3 directives to modern Angular
angular-nvd3 wrapped NVD3, a set of reusable charts built on D3 version 3, in an nvd3 directive configured with an options object. Many apps also had hand-written D3 directives. NVD3 does not work with current D3 versions.
What replaces it
| Option | When to choose it |
|---|---|
| D3 directly in a component | For custom visualizations: Angular owns the component, D3 handles scales, shapes and axes. |
| ngx-charts | Declarative charts for Angular built on D3 modules; covers the common line, bar, pie and area charts. |
| ngx-echarts (Apache ECharts) | When you need many chart types, large data sets or canvas rendering. |
How to migrate it
- Separate the standard charts (line, bar, pie) from the truly custom D3 visualizations.
- Move the standard charts to a chart library and keep only the custom ones on D3.
- Port the custom D3 code to the current modular API, render it after the view is ready and clean up on destroy.
Watch out. D3 changed a lot after version 3: d3.scale.linear became d3.scaleLinear, and selections became immutable. Old directive code does not run unchanged, so budget for a port, not a copy.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn