¿Cómo crear DIVs y etiquetas en D3?

Autor: | Última modificación: 27 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El proceso de cómo crear DIVs y etiquetas en D3 (Data-Driven Documents) de tipo <p> es uno de los facilitadores para el procesamiento de los datos en esta librería de diseño visual. En efecto, su implementación se produce cuando los DIVs se presentan como contenedores, papel que normalmente desarrolla el SVG (Scalable Vector Graphics).

Por lo tanto, saber cómo emplearlo es un conocimiento primordial como alternativa de desarrollo en esta librería de diseño visual. Por este motivo, en este post, te explicamos cómo crear DIVs y etiquetas en D3 (Data-Driven Documents) de tipo <p>.

¿Cómo crear DIVs y etiquetas en D3?

El proceso para crear DIVs y etiquetas en D3 (Data-Driven Documents) hace referencia a la alternativa de convertir un DIV en el contenedor de las etiquetas, de manera que los datos no se introducen en el SVG (Scalable Vector Graphics), sino en el DIV. Todo ello se realiza a través de JSON y del HTML.

Para crear un DIV y marcar etiquetas para mostrar el contenido de datos JSON, en primer lugar, debes establecer los parámetros base como punto de partida. Para ello, hay que crear un index HTML y, en este espacio, tendrás que añadir el link CSS y el script source, como normalmente se desarrolla.

¿Cómo crear DIVs y etiquetas en D3? 1

A partir de allí, tendrás que modificar el <body> con el div y script y abrir el index de main.js para agregar las constantes de margen y la etiqueta SVG (Scalable Vector Graphics).

¿Cómo crear DIVs y etiquetas en D3? 2

Ahora, el proceso continúa con el desarrollo D3.json con el console.log(data) de la siguiente forma:

¿Cómo crear DIVs y etiquetas en D3? 3

Una vez se establecen estos fundamentos, se procede a crear DIVs y etiquetas en D3 (Data-Driven Documents) que se hallen dentro del DIV como contendor.

De forma que se agregan más cuestiones desde la consola de JSON por medio de la creación de otro DIV. Así, las configuraciones no se realizan desde el SVG (Scalable Vector Graphics), sino desde el DIV como un enlace de datos.

¿Cómo crear DIVs y etiquetas en D3? 4

Por otra parte, dicho proceso en Data-Driven Documents (D3) se presenta así:

¿Cómo crear DIVs y etiquetas en D3? 5

Una vez se establece el DIV como contenedor en D3, se procede a agregar la etiqueta dentro de este enlace de datos por medio del selectAll(). En este caso, la etiqueta que se introduce es <p> como parte del var elements.

Para ello, se utiliza enter, una operación que logra comparar los datos con la selección y mantiene solo los que no tienen elementos en el DOM (Document Object Model). Además, para crear DIVs y etiquetas en D3, esta operación te permite crear una selección “fantasma” en la que hay que hacer un append.

A partir de allí, podrás añadir atributos en la selección fantasma de SelectAll contenidos en el div. En el siguiente ejemplo, se agrega texto como atributo con datos de tipo de país (country):

¿Cómo crear DIVs y etiquetas en D3? 6

Como podrás notar, en la consola de D3 (Data-Driven Documents) se han agregado antes a los atributos de textos de países la etiqueta <p>, de forma que la función fantasma que ya se ha instaurado para seleccionar todos los datos que tengan esta etiqueta se vean reflejados en el contenedor DIV.

¿Cómo crear DIVs y etiquetas en D3? 7

¿Cuál es el siguiente paso?

En el desarrollo de este post, te hemos mostrado cómo crear DIVs y etiquetas en D3 (Data-Driven Documents) de tipo <p>. Debes tener en cuenta que estos procesos funcionan como facilitadores para la instancia de visualización de datos en esta librería de diseño visual; sin embargo, podrás contar con muchos más procesos. ¡Queda mucho más por aprender!

Por esta razón, desde KeepCoding te aconsejamos echarle un vistazo al Bootcamp Full Stack Big Data, Inteligencia Artificial & Machine Learning si lo que deseas es continuar aprendiendo y formarte como un data scientist profesional. Por medio de 11 módulos y de la mano de grandes expertos en el mundo Big Data, podrás instruirte en los sistemas, lenguajes y programas más importantes para el manejo de los macrodatos. ¡No esperes más para inscribirte!

👉 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]

¿Sabías que hay más de 5.000 vacantes para desarrolladores de Big Data sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!