D3.js - Transição
Transição é o processo de mudança de um estado para outro de um item. D3.js fornece umtransition()método para realizar a transição na página HTML. Vamos aprender sobre transição neste capítulo.
O método transaction ()
O método transaction () está disponível para todos os seletores e inicia o processo de transição. Este método suporta a maioria dos métodos de seleção, como - attr (), style (), etc. Mas, ele não suporta os métodos append () e data (), que precisam ser chamados antes do método transaction (). Além disso, fornece métodos específicos para a transição, como duração (), facilidade (), etc. Uma transição simples pode ser definida como segue -
d3.select("body")
.transition()
.style("background-color", "lightblue");Uma transição pode ser criada diretamente usando o método d3.transition () e então usada junto com os seletores da seguinte maneira.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Um exemplo mínimo
Vamos agora criar um exemplo básico para entender como a transição funciona.
Crie um novo arquivo HTML, transition_simple.html com o seguinte código.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>Aqui, selecionamos o bodyelemento e, em seguida, iniciou a transição chamando o método transaction (). Em seguida, instruímos a transferir a cor de fundo da cor atual,white para light blue.
Agora, atualize o navegador e, na tela, a cor de fundo muda de branco para azul claro. Se quisermos mudar a cor de fundo de azul claro para cinza, podemos usar a seguinte transição -
d3.select("body").transition().style("background-color", "gray");