D3.js: selecciones

Las selecciones son uno de los conceptos centrales en D3.js. Se basa en selectores CSS. Nos permite seleccionar uno o más elementos en una página web. Además, nos permite modificar, agregar o eliminar elementos en relación con el conjunto de datos predefinido. En este capítulo, veremos cómo usar selecciones para crear visualizaciones de datos.

D3.js ayuda a seleccionar elementos de la página HTML utilizando los siguientes dos métodos:

select()- Selecciona solo un elemento DOM haciendo coincidir el selector CSS dado. Si hay más de un elemento para el selector de CSS dado, selecciona solo el primero.
selectAll()- Selecciona todos los elementos DOM haciendo coincidir el selector CSS dado. Si está familiarizado con la selección de elementos con jQuery, los selectores de D3.js son casi los mismos.

Repasemos cada uno de los métodos en detalle.

El método select ()

El método select () selecciona el elemento HTML basado en Selectores CSS. En los selectores de CSS, puede definir y acceder a elementos HTML de las siguientes tres formas:

Etiqueta de un elemento HTML (por ejemplo, div, h1, p, span, etc.)
Nombre de clase de un elemento HTML
ID de un elemento HTML

Veámoslo en acción con ejemplos.

Selección por etiqueta

Puede seleccionar elementos HTML usando su TAG. La siguiente sintaxis se utiliza para seleccionar los elementos de la etiqueta "div",

d3.select(“div”)

Example - Cree una página "select_by_tag.html" y agregue los siguientes cambios,

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla:

Selección por nombre de clase

Los elementos HTML diseñados con clases CSS se pueden seleccionar utilizando la siguiente sintaxis.

d3.select(“.<class name>”)

Cree una página web "select_by_class.html" y agregue los siguientes cambios:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla:

Selección por ID

Cada elemento de una página HTML debe tener una identificación única. Podemos usar este ID único de un elemento para acceder a él usando el método select () como se especifica a continuación.

d3.select(“#<id of an element>”)

Cree una página web "select_by_id.html" y agregue los siguientes cambios.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla.

Agregar elementos DOM

La selección de D3.js proporciona la append() y el text()métodos para agregar nuevos elementos a los documentos HTML existentes. Esta sección explica cómo agregar elementos DOM en detalle.

El método append ()

El método append () agrega un nuevo elemento como último elemento secundario del elemento en la selección actual. Este método también puede modificar el estilo de los elementos, sus atributos, propiedades, HTML y contenido de texto.

Cree una página web "select_and_append.html" y agregue los siguientes cambios:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, puede ver el siguiente resultado en la pantalla,

Aquí, el método append () agrega un nuevo intervalo de etiquetas dentro de la etiqueta div como se muestra a continuación:

<div class = "myclass">
   Hello World!<span></span>
</div>

El método text ()

El método text () se utiliza para establecer el contenido de los elementos seleccionados / añadidos. Cambiemos el ejemplo anterior y agreguemos el método text () como se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Ahora actualice la página web y verá la siguiente respuesta.

Aquí, el script anterior realiza una operación de encadenamiento. D3.js emplea inteligentemente una técnica llamadachain syntax, que puede reconocer de jQuery. Al encadenar métodos junto con puntos, puede realizar varias acciones en una sola línea de código. És rápido y fácil. El mismo script también puede acceder sin sintaxis de cadena como se muestra a continuación.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Modificar elementos

D3.js proporciona varios métodos, html(), attr() y style()para modificar el contenido y estilo de los elementos seleccionados. Veamos cómo utilizar los métodos de modificación en este capítulo.

El método html ()

El método html () se utiliza para establecer el contenido html de los elementos seleccionados / añadidos.

Cree una página web "select_and_add_html.html" y agregue el siguiente código.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla.

El método attr ()

El método attr () se utiliza para agregar o actualizar el atributo de los elementos seleccionados. Cree una página web "select_and_modify.html" y agregue el siguiente código.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla.

El método style ()

El método style () se utiliza para establecer la propiedad de estilo de los elementos seleccionados. Cree una página web "select_and_style.html" y agregue el siguiente código.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla.

El método classed ()

El método classed () se utiliza exclusivamente para establecer el atributo "clase" de un elemento HTML. Dado que, un solo elemento HTML puede tener varias clases; debemos tener cuidado al asignar una clase a un elemento HTML. Este método sabe cómo manejar una o varias clases en un elemento y será eficaz.

Add class- Para agregar una clase, el segundo parámetro del método clasificado debe establecerse en verdadero. Se define a continuación:

d3.select(".myclass").classed("myanotherclass", true);

Remove class- Para eliminar una clase, el segundo parámetro del método clasificado debe establecerse en falso. Se define a continuación:

d3.select(".myclass").classed("myanotherclass", false);

Check class- Para verificar la existencia de una clase, simplemente omita el segundo parámetro y pase el nombre de la clase que está consultando. Esto devolverá verdadero, si existe, falso, si no es así.

d3.select(".myclass").classed("myanotherclass");

Esto devolverá verdadero, si algún elemento de la selección tiene la clase. Utilizard3.select para la selección de un solo elemento.

Toggle class - Para cambiar una clase al estado opuesto, elimínela si ya existe, agréguela si aún no existe; puede realizar una de las siguientes acciones.

Para un solo elemento, el código podría verse como se muestra a continuación:

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

El método selectAll ()

El método selectAll () se utiliza para seleccionar varios elementos en el documento HTML. El método select selecciona el primer elemento, pero el método selectAll selecciona todos los elementos que coinciden con la cadena de selección específica. En caso de que la selección no coincida con ninguno, devuelve una selección vacía. Podemos encadenar todos los métodos de modificación adjuntos,append(), html(), text(), attr(), style(), classed(),etc., en el método selectAll () también. En este caso, los métodos afectarán a todos los elementos coincidentes. Comprendamos creando una nueva página web "select_multiple.html" y agreguemos la siguiente secuencia de comandos:

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

Al solicitar la página web a través del navegador, verá el siguiente resultado en la pantalla.

Aquí, el método attr () se aplica a ambos div y h2 tag y el color del texto en ambas etiquetas cambia a rojo.

↰ Previous page Next page ↱