Gràfics reactius a Angular 8 mitjançant D3.js

Bloc

Gràfics reactius a Angular 8 mitjançant D3.js

Imatge per publicar

Distribució de la freqüència de lliurament de pizza en temps real (dades fictícies)

Aquest article mostra com crear gràfics reactius dins d’una aplicació Angular 8 mitjançant el marc JavaScript D3.

Tot i que hi ha una sèrie de bons articles i fils de discussió que cobreixen aquest tema (alguns s’enumeren a les referències), he intentat reunir tots els aspectes clau necessaris per crear codi preparat per a la producció.

  • Reposició de GitHub
  • Demostració en directe

Per què D3 a la part superior d'Angular?

La capacitat bàsica de D3 (Data-Driven-Documents) és manipular elements DOM en resposta a les dades de l’aplicació dinàmica. Però, també ho és per a Angular, React, jQuery i una gran quantitat d'altres marcs.

La motivació per utilitzar el marc D3 (o similar) amb Angular és proporcionar les següents capacitats de visualització de dades:

  • Creació i eliminació dinàmica d’elements gràfics del DOM.
  • Vinculació de dades d'aplicacions a elements gràfics.
  • Transformació de dades d'usuari a gràfics i forma de coordenades.
  • Animació d’elements gràfics mitjançant transicions i interpolació.
  • Funcions matemàtiques avançades.

Tenint en compte aquestes capacitats D3 i la manca de funcions equivalents a Angular, procedim a barrejar les dues amb molta precaució.

# visualització de dades # d3js #charts #angular #angular 8

medium.com

Gràfics reactius a Angular 8 mitjançant D3.js

Aquest article mostra com crear gràfics reactius dins d’una aplicació Angular 8 mitjançant el marc JavaScript D3. Aspectes clau necessaris per crear codi preparat per a la producció. Gràfics reactius en Angular 8 amb D3.js