D3.js: API de selección

Las selecciones son una poderosa transformación basada en datos del modelo de objetos de documento (DOM). Se utiliza para establecer atributos, estilos, propiedades, contenido de texto o HTML y mucho más. Este capítulo explica la API de selecciones en detalle.

Configurando la API

Puede configurar la API directamente utilizando el siguiente script.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Métodos de la API de selección

Los siguientes son los métodos más importantes en la selección de API.

  • d3.selection()
  • d3.select(selector)
  • d3.selectAll(selector)
  • selection.selectAll(selector)
  • selection.filter(filter)
  • selection.merge(other)
  • d3.matcher(selector)
  • d3.creator(name)
  • selection.each(function)
  • selection.call (función [, argumentos ...])
  • d3.local()
  • local.set (nodo, valor)
  • local.get(node)
  • local.remove(node)

Analicemos ahora cada uno de estos en detalle.

d3.selection ()

Este método se utiliza para seleccionar el elemento raíz. Esta función también se puede utilizar para probar selecciones o para ampliar la selección d3js.

d3.select (selector)

Este método se utiliza para seleccionar el primer elemento que coincide con la cadena de selección especificada.

Example - Consideremos el siguiente ejemplo.

var body = d3.select("body");

Si el selector no es una cadena, selecciona el nodo especificado, que se define a continuación.

d3.select("p").style("color", "red");

d3.selectAll (selector)

Este método selecciona todos los elementos que coinciden con la cadena de selección especificada.

Example - Consideremos el siguiente ejemplo.

var body = d3.selectAll("body");

Si el selector no es una cadena, selecciona la matriz de nodos especificada, que se define a continuación.

d3.selectAll("body").style("color", "red");

selection.selectAll (selector)

Este método se utiliza para seleccionar un elemento. Selecciona los elementos descendientes que coinciden con la cadena de selección especificada. Los elementos de la selección devuelta se agrupan por su correspondiente nodo principal en esta selección. Si ningún elemento coincide con el selector especificado para el elemento actual, o si el selector es nulo, el grupo en el índice actual estará vacío.

Example - Consideremos el siguiente ejemplo.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtro)

Este método se utiliza para filtrar la selección, devolviendo una nueva selección que contiene solo los elementos para los que el filtro especificado es verdadero.

Example - Consideremos el siguiente ejemplo.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Aquí, filtrar una selección de filas de la tabla devuelve solo resultados impares.

selection.merge (otro)

Este método se utiliza para devolver una nueva selección fusionada con la otra selección especificada.

Example - Consideremos el siguiente ejemplo.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (selector)

Este método se utiliza para asignar el selector especificado. Devuelve una función, que devuelve verdadero.

Example - Consideremos el siguiente ejemplo.

var p = selection.filter(d3.matcher("p"));

d3.creator (nombre)

Este método se utiliza para asignar el nombre del elemento especificado. Devuelve una función, que crea un elemento con el nombre dado, asumiendo que este es el elemento padre.

Example - Consideremos el siguiente ejemplo.

selection.append(d3.creator("p"));

selection.each (función)

Este método se utiliza para invocar la función especificada para cada elemento seleccionado, en el orden pasado por el dato actual (d), el índice actual (i) y el grupo actual (nodos) con este como el elemento DOM actual (nodos [i ]). Se explica a continuación.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (función [, argumentos ...])

Se utiliza para invocar la función especificada exactamente una vez. La sintaxis se muestra a continuación.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Este método se puede especificar como se muestra a continuación.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local le permite definir el estado local que es independiente de los datos.

Example - Consideremos el siguiente ejemplo.

var data = d3.local();

A diferencia de var, el valor de cada local también está dentro del ámbito del DOM.

local.set (nodo, valor)

Este método establece el valor de este local en el nodo especificado en el valor.

Example - Consideremos el siguiente ejemplo.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Este método devuelve el valor de este local en el nodo especificado. Si el nodo no define este local, devuelve el valor del ancestro más cercano que lo define.

local.remove (nodo)

Este método elimina el valor de este local del nodo especificado. Devuelve verdadero, si el nodo está definido; de lo contrario, devuelve falso.