Transition() 메서드
이 메서드는 모든 선택자에 가능하고 전환시켜줍니다.
atrr이나 style에는 적용되지만 그 상위인 append나 data에는 적용이 안됩니다.
d3.select("body")
.transition()
.style("background-color", "lightblue");body태그를 선택해주고 transition() 메서드를 적용시켜줍니다. 이때 전환 대상은 style이겠죠.
body 태그의 배경 색을 파란색으로 전환해주는겁니다.
또한 duration도 함께 사용하는데
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");
duration(2000) 2초를 적용시켜준 것을 변수 t에 담아주고 이를 body태그의 transition()메서드에 적용합니다.
즉 duration을 적용시켜준 transition입니다.
duration은 다음 시간에 보겠지만 부여한 시간만큼 천천히 부드럽게 전환 되도록 해주는 기능입니다.
<!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>즉 결론은 새로고침을 해주면 흰색 배경에서 lightblue 색상으로 바뀌게 됩니다.
'웹 > JavaScript,JQurey' 카테고리의 다른 글
| D3.js 공부 9 - 막대차트 그리기(part1) (0) | 2019.04.16 |
|---|---|
| D3.js 공부 8 - 에니메이션 (0) | 2019.04.16 |
| D3.js 공부 6 - SVG 변환 (0) | 2019.04.10 |
| D3.js 공부 5 - SVG (0) | 2019.04.03 |
| D3.js 공부 4 - 데이터 조인 메서드 (0) | 2019.04.02 |
