Header Ads Widget

Ticker

6/recent/ticker-posts

Selección DOM D3 con JavaScript D3

 

En este episodio de trabajo con el impresionante marco de JavaScript D3, echaremos un vistazo a D3 DOM Selection para que podamos hacer un buen uso de la potencia que nos proporciona. Además, tendremos que considerar cosas como nuestros propios scripts personalizados y CSS, además de cualquier otra biblioteca de terceros que queramos incluir en nuestro proyecto. A continuación, hablaremos brevemente sobre el espacio de nombres D3, la configuración HTML, la pseudo selección de n-ésimo hijo, así como la modificación de selecciones usando D3 JS.


Habilitación de D3 en su página HTML

Hay algunas formas de manejar la inyección de la biblioteca D3 en su página para que pueda hacer uso de su poder. En lugar de cubrir cómo hacer todo esto manualmente, solo haremos un uso práctico de una red CDN o de entrega de contenido. He llegado a amar las CDN por su facilidad de uso y comportamiento coherente junto con las mejoras en el rendimiento del almacenamiento en caché. Entonces, todo lo que tiene que hacer para comenzar a usar D3 de inmediato es pegar esta línea en su página.


¿Dónde debo colocar mis propios guiones D3 escritos a mano?

Ahora que tenemos la biblioteca instalada en nuestra página, necesitamos un lugar para contener y recopilar todo el script que escribiremos para aprovechar la propia biblioteca D3. Haremos esto fácil y simplemente crearemos un nuevo archivo JavaScript para almacenar estos datos. Lo colocaremos en nuestro directorio js y nombraremos el archivo d3scripts.js También incluiremos un archivo CSS en blanco para cualquier estilo personalizado que queramos agregar, así como bootstrap. Aquí están los comienzos de nuestro archivo de prueba que usaremos para patear los neumáticos en D3.


Capacidades de selección de DOM D3

Estos métodos tienen un espacio de nombres dentro del objeto d3. Esta es solo una forma elegante de decir, debe escribir d3.antes de intentar usar uno de estos métodos.

d3.select ()

Al igual que está acostumbrado con jQuery, con el método d3.select () , pasa un selector y se le devuelve la primera coincidencia. Es importante tener en cuenta que si hay varias coincidencias en la página, solo se devuelve la primera.

d3.selectAll ()

Si desea devolver todas las coincidencias para el selector que usa, entonces el método d3.selectAll () es el que desea usar. Podemos probar ambos en un marcado simple de nuestra página de espacio aislado.

d3selectmethod


d3selectallmethod

pseudo selector de nth-child

El método d3.selectAll () es bastante útil, pero tal vez no desee golpear todo en el conjunto emparejado con un nuevo valor. ¿Qué sucede si solo necesita seleccionar y modificar uno de los cinco elementos dados, en una posición específica? Aquí es donde entra perfectamente el pseudo selector de CSS nth-child . Utilizándolo, podemos especificar exactamente dónde queremos seleccionar y modificar. Consideremos esta lista:

Nos gustaría usar el motor de selección en D3 para buscar el li que contiene jQuery y actualizarlo para decir, "jQuery es genial". Probémoslo.

pseudo selector de enésimo hijo

¡Excelente! Al usar el selector nth-child, especificamos fácilmente el cuarto elemento de la colección y actualizamos el valor. ¡Tenga en cuenta que esto no se basa en cero! Como programadores, estamos acostumbrados a matrices y colecciones que siempre comienzan en 0. Con elselector nth-child , este no es el caso. De hecho, comienza en el número 1, por lo que su conteo será más fácil. El selector nth-child también tiene algunas características realmente interesantes para refinar aún más la forma en que puede seleccionar elementos. Puede seleccionar todos los elementos pares o impares utilizando:nth-child(even)y:nth-child(odd)respectivamente. Si desea capturar el tercer elemento y todos los elementos posteriores, puede hacerlo así:nth-child(n+3)Tal vez le gustaría seleccionar cada tercer elemento, o cada quinto elemento. Nuevamente, puede hacerlo usando:nth-child(3n)y:nth-child(5n)respectivamente. Es un selector muy útil para tener un buen dominio. Como cualquier otra cosa, simplemente pruébelos y pruebe diferentes enfoques para resolver cualquier problema de selección que pueda encontrar.


Modificación de selecciones con D3

La selección de elementos y datos es el primer paso para trabajar con D3. Sin embargo, una vez que tenga sus ganchos en estos datos, ¿qué va a hacer con ellos? Por lo general, trabajará con él o lo modificará de alguna manera. Estos son los métodos que usa para hacer precisamente eso. Los probaremos también.


d3.append ()

El método d3.append () funciona de manera muy similar a como lo esperaría. Básicamente, pasas al método lo que te gustaría agregar a la selección. Las cosas comunes para agregar son elementos HTML como un span o div.


d3.insert ()

El método d3.insert () es un poco más granular que el d3.append () . Con append, realmente no tienes control sobre dónde colocar el elemento. Con insertar, si desea colocar un elemento dentro de una lista desordenada, por ejemplo, puede hacerlo.


d3.text ()

De hecho, ya hemos usado d3.text () varias veces. Como ha visto, simplemente toma el texto que pasa al método y coloca ese texto en el elemento que ha seleccionado en la página.


d3.html ()

Cuando desee poder insertar fragmentos completos de HTML en lugar de solo texto sin formato, puede usar el método d3.html () para hacerlo.


d3.remove ()

Habrá ocasiones en las que tendrá que eliminar un elemento de la página. Es fácil hacerlo usando el método d3.remove () .

A continuación se muestra un ejemplo del uso de algunos de estos métodos D3.
trabajar con selecciones en D3

Entonces esto es bastante hábil. Lo que sucede en este ejemplo es que seleccionamos la lista desordenada y luego le agregamos un divelemento. Al encadenar el método d3.attr () a esto, podemos establecer un atributo y un valor para ese atributo. Como puede ver, especificamos una clase, luego establecemos el valor de esa clase en uno contenido en bootstrap. Recuerde que incluimos el repositorio de arranque a través de CDN en nuestro banco de pruebas sandbox. Finalmente, volvemos a encadenar otro método. Esta vez es el método d3.html () para colocar algunas marcas HTML dentro del div recién agregado. Todavía no hicimos uso de d3.insert () , d3.text () o d3.remove () , así que creemos otro ejemplo y hagámoslo ahora.

probar selecciones en D3

Por último, si desea eliminar todos los elementos li de la página, puede hacerlo con estilo y gracia utilizando este fragmento.

Configuración básica de HTML para D3 JS Resumen

Estamos empezando a ganar algo de impulso al trabajar con D3. Al igual que la mayoría de las tecnologías de código abierto que podemos incorporar fácilmente en nuestros sitios web mediante una red de entrega de contenido, también podemos incluir la biblioteca D3 para usarla en un instante. También hemos cubierto cómo seleccionar varios elementos usando el método d3.select (), el método d3.selectAll () y el poderoso selector: nth-child en combinación con el método d3.selectAll () para obtener cualquier elemento que deseo. Una vez que obtenemos los elementos que necesitamos, analizamos cómo operar con estos elementos usando métodos como d3.append, d3.insert, d3.text, d3.html, d3.attr y d3.remove.


Publicar un comentario

0 Comentarios