¿Cómo funciona?

A continuación se ilustra una vista simplificada de la arquitectura de D3. Como indica el nombre de la biblioteca, son los datos los que rigen los documentos que muestran las visualizaciones de D3. Al agregar, modificar y eliminar datos, se afecta directamente la apariencia del gráfico en pantalla:

Los datos suelen proporcionarse como una matriz de JavaScript, generada localmente o cargada desde un archivo externo. Un script típico de D3.js utiliza selectores CSS para seleccionar elementos HTML o SVH y los vincula a elementos de datos individuales, eliminando, actualizando o añadiendo elementos gráficos automáticamente cuando es necesario.

Los selectores CSS se utilizan para seleccionar uno o más elementos y crear lo que D3 denomina un objeto de selección. Este objeto permite aplicar estilos y modificar los atributos de los elementos seleccionados. Al vincular una matriz a un objeto de selección, cada dato se asigna a un elemento de la selección. Se puede acceder a estos datos mediante funciones de devolución de llamada utilizadas en métodos que definen valores para estilos, atributos y transformaciones.

También puedes declarar una selección de elementos que no existen en el DOM. Al vincular esta selección a una matriz de datos, se creará automáticamente un elemento por cada dato. Después, puedes usar los datos para proporcionar contenido, estilos y atributos a los nuevos elementos.

D3 también mantiene sincronizados los datos y sus elementos. Al actualizar con un conjunto de datos más pequeño, los elementos sobrantes se colocan en una matriz independiente para que pueda eliminarlos. Si el conjunto de datos crece, los elementos existentes se actualizan y los elementos faltantes se crean y se añaden para ajustarse a los datos disponibles.