D3.js-전환
전환은 항목의 한 상태에서 다른 상태로 변경하는 프로세스입니다. D3.js는transition()HTML 페이지에서 전환을 수행하는 방법입니다. 이 장에서 전환에 대해 알아 보겠습니다.
transition () 메서드
transition () 메서드는 모든 선택기에 사용할 수 있으며 전환 프로세스를 시작합니다. 이 메서드는 – attr (), style () 등과 같은 대부분의 선택 메서드를 지원합니다. 그러나 transition () 메서드보다 먼저 호출해야하는 append () 및 data () 메서드는 지원하지 않습니다. 또한 duration (), ease () 등과 같은 전환에 특정한 메서드를 제공합니다. 간단한 전환은 다음과 같이 정의 할 수 있습니다.
d3.select("body")
.transition()
.style("background-color", "lightblue");d3.transition () 메서드를 사용하여 전환을 직접 생성 한 후 다음과 같이 선택기와 함께 사용할 수 있습니다.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");최소한의 예
이제 전환이 어떻게 작동하는지 이해하기위한 기본 예제를 만들어 보겠습니다.
새 HTML 파일을 만듭니다. transition_simple.html 다음 코드로.
<!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>여기에서 우리는 body요소를 선택한 다음 transition () 메서드를 호출하여 전환을 시작했습니다. 그런 다음 현재 색상에서 배경색을 전환하도록 지시했습니다.white ...에 light blue.
이제 브라우저를 새로 고치면 화면에서 배경색이 흰색에서 하늘색으로 변경됩니다. 배경색을 밝은 파란색에서 회색으로 변경하려면 다음 전환을 사용할 수 있습니다.
d3.select("body").transition().style("background-color", "gray");