¿Qué es el patrón de actualización en D3?

Autor: | Última modificación: 1 de julio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

Data-Driven Documents (D3) posee una máxima personalización en el desarrollo de sus gráficas y demás representaciones visuales del procesamiento de los macrodatos. En D3 también podrás contar con una gran variedad de alternativas para la visualización de datos, desde esquemas básicos hasta gráficas complejas.

Para ello, D3.js cuenta con múltiples funciones y operaciones que facilitan el desarrollo de la visualización de datos, dentro de estas, podrás encontrar el General Update Pattern o Patrón de actualización en la inscripción de la consola.

En este post, te explicamos qué es el patrón de actualización en D3 (Data-Driven Documents) y sus diferentes usos para la visualización de datos.

¿Qué es el patrón de actualización en D3?

General Update Pattern o patrón de actualización en D3 (Data-Driven Documents) es una función que trabaja con el enlazado de datos (Data Binding) bajo la operación enter, es decir, quien compara datos con la selección y deja solo los que no tienen elementos en el DOM (Document Object Model).

En efecto, el patrón de actualización se utiliza cuando se agregan nuevos datos al DOM (Document Object Model) y, por tanto, la operación enter debe actualizarse.

¿Qué es el patrón de actualización en D3? 1

A continuación te compartimos su inscripción según la función a la que remite:

  • Patrón de actualización con el grupo enter de drawBar:

function drawBar(group) {
group.enter().append(«rect»)
.attr(‘id’, d => d.country)
.attr(‘class’, ‘bar’)
.attr(‘height’, y.bandwidth())
.attr(‘width’, d => x(d.titles))
.attr(‘x’, margin.left)
.attr(‘y’, d => y(d.country))
}

  • Patrón de actualización con la función de bars.enter:

let bars = elementGroup.selectAll(‘rect’).data(data)
bars.enter().append(‘rect’)
.attr(‘class’, ‘bar’)
.attr(‘x’, d => x(d.country))
.attr(‘y’, d => y(d.titles))
.attr(‘width’, x.bandwidth())
.attr(‘height’, d =>
height –
y(d.titles) – margin.bottom – margin.top)

  • Patrón de actualización con elements.enter para el data binding:

// data binding:
let elements = elementGroup.selectAll(‘.country’).data(data)
elements.enter().call(drawCircles)

  • Patrón de actualización con la función sector.enter del data binding:

sector.enter()
.append(‘g’).call(drawSlices)
})

¿Cuál es el siguiente paso?

En este post, te has acercado a la función del patrón de actualización en D3 (Data-Driven Documents), sin embargo, su desarrollo se rige por la operación que te encuentres realizando. Por este motivo, te aconsejamos ajustar este conocimiento al desenvolvimiento de tu visualización de los datos.

De hecho, para hacerlo más en profundidad, desde KeepCoding te ofrecemos nuestro Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning. Gracias a esta formación intensiva, podrás aprender todo lo relacionado con las herramientas y lenguajes actuales y populares de mundo del manejo de los macrodatos de la mano de profesores expertos en el tema y con una amplia trayectoria dentro de este campo. ¡Inscríbete ahora!

👉 Descubre más del Big Data, Inteligencia Artificial & Machine Learning Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

La IA no te quitará el trabajo, lo hará quien sepa usarla

Conviértete en Data Scientist con el único Bootcamp que además te formará en Inteligencia Artificial Generativa para potenciar tu perfil.