D3.js - API de seleção

As seleções são uma poderosa transformação orientada a dados do modelo de objeto de documento (DOM). É usado para definir atributos, estilos, propriedades, HTML ou conteúdo de texto e muito mais. Este capítulo explica a API de seleções em detalhes.

Configurando a API

Você pode configurar a API diretamente usando o script abaixo.

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

</script>

Métodos de API de seleção

A seguir estão os métodos mais importantes na API de seleção.

  • 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 (função [, argumentos ...])
  • d3.local()
  • local.set (nó, valor)
  • local.get(node)
  • local.remove(node)

Vamos agora discutir cada um deles em detalhes.

d3.selection ()

Este método é usado para selecionar o elemento raiz. Esta função também pode ser usada para testar seleções ou estender a seleção d3js.

d3.select (seletor)

Este método é usado para selecionar o primeiro elemento que corresponda à string do seletor especificada.

Example - Vamos considerar o seguinte exemplo.

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

Se o seletor não for uma string, ele seleciona o nó especificado, que é definido a seguir.

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

d3.selectAll (seletor)

Este método seleciona todos os elementos que correspondem à string do seletor especificada.

Example - Vamos considerar o seguinte exemplo.

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

Se o seletor não for uma string, ele seleciona a matriz especificada de nós, que é definida abaixo.

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

selection.selectAll (seletor)

Este método é usado para selecionar um elemento. Ele seleciona os elementos descendentes que correspondem à string do seletor especificada. Os elementos na seleção retornada são agrupados por seu nó pai correspondente nesta seleção. Se nenhum elemento corresponder ao seletor especificado para o elemento atual, ou se o seletor for nulo, o grupo no índice atual estará vazio.

Example - Vamos considerar o seguinte exemplo.

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

selection.filter (filtro)

Este método é usado para filtrar a seleção, retornando uma nova seleção que contém apenas os elementos para os quais o filtro especificado é verdadeiro.

Example - Vamos considerar o seguinte exemplo.

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

Aqui, filtrar uma seleção de linhas da tabela retorna apenas ímpar.

selection.merge (outro)

Este método é usado para retornar uma nova seleção mesclada com a outra seleção especificada.

Example - Vamos considerar o seguinte exemplo.

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

d3.matcher (seletor)

Este método é usado para atribuir o seletor especificado. Ele retorna uma função, que retorna verdadeiro.

Example - Vamos considerar o seguinte exemplo.

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

d3.creator (nome)

Este método é usado para atribuir o nome do elemento especificado. Ele retorna uma função, que cria um elemento com o nome fornecido, assumindo que este seja o elemento pai.

Example - Vamos considerar o seguinte exemplo.

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

selection.each (função)

Este método é usado para invocar a função especificada para cada elemento selecionado, na ordem passada pelo datum atual (d), o índice atual (i) e o grupo atual (nós) com este como o elemento DOM atual (nós [i ]). Isso é explicado a seguir.

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

selection.call (função [, argumentos ...])

É usado para chamar a função especificada exatamente uma vez. A sintaxe é mostrada abaixo.

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

Este método pode ser especificado conforme mostrado abaixo.

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

d3.local ()

D3 local permite definir o estado local que é independente dos dados.

Example - Vamos considerar o seguinte exemplo.

var data = d3.local();

Ao contrário de var, o valor de cada local também é definido pelo DOM.

local.set (nó, valor)

Este método define o valor deste local no nó especificado para o valor.

Example - Vamos considerar o seguinte exemplo.

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

Este método retorna o valor deste local no nó especificado. Se o nó não definir esse local, ele retornará o valor do ancestral mais próximo que o define.

local.remove (nó)

Este método exclui o valor deste local do nó especificado. Retorna verdadeiro, se o nó está definido, caso contrário retorna falso.