D3.js - API de Transições

As transições D3 levam uma seleção de elementos e para cada elemento; ele aplica uma transição a uma parte da definição atual do elemento.

Configurando API

Você pode configurar a API de transição usando o seguinte script.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Métodos da API de transição

Vamos examinar os métodos da API de transição em detalhes.

Selecionando Elementos

Vamos discutir os vários elementos de seleção em detalhes.

selection.transition([name])- Este método é usado para retornar uma nova transição de seleção com o nome. Se um nome não for especificado, ele retornará nulo.
selection.interrupt([name]) - Este método é usado para interromper os elementos selecionados da transição com o nome e é definido a seguir.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - Este método é usado para interromper a transição do nome especificado no nó especificado.
d3.transition([name]) - Este método é usado para retornar uma nova transição com o nome especificado.
transition.select(selector) - Este método é usado para selecionar o primeiro elemento que corresponde ao seletor especificado e retorna uma transição na seleção resultante, que é definida abaixo.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- Este método é usado para selecionar todos os elementos que correspondem ao seletor especificado e retorna uma transição na seleção resultante. É definido abaixo -

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - Este método é usado para selecionar os elementos que correspondem ao filtro especificado, eles são definidos abaixo.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- Este método é usado para mesclar a transição com outra transição. É definido abaixo.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- Este método é usado para retornar uma nova transição nos elementos selecionados. Está programado para começar quando a transição terminar. A nova transição herda o nome, a duração e o easing desta transição.

Example - Vamos considerar o seguinte exemplo.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Aqui, o corpo desvanece para amarelo e começa apenas cinco segundos antes da última transição.

d3.active(node[, name]) - Este método é usado para retornar a transição no nó especificado com o nome.

Métodos de tempo

Vamos examinar os métodos da API de tempo de transição em detalhes.

transition.delay([value])- Este método é usado para definir o atraso de transição para o valor especificado. Se uma função for avaliada para cada elemento selecionado, ela será passada para o datum atual 'd' e índice 'i', com o contexto como o elemento DOM atual. Se um valor não for especificado, retorna o valor atual do atraso para o primeiro elemento (não nulo) na transição. É definido abaixo,

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- Este método é usado para definir a duração da transição para o valor especificado. Se um valor não for especificado, retorna o valor atual da duração para o primeiro elemento (não nulo) na transição.
transition.ease([value])- Este método é usado para facilitar o valor de transição para elementos selecionados. A função de atenuação é chamada para cada quadro da animação e passa o tempo normalizado 't' no intervalo [0, 1]. Se um valor não for especificado, ele retornará a função de atenuação atual para o primeiro elemento (não nulo) na transição.

No próximo capítulo, discutiremos o conceito de arrastar e soltar no d3.js.