ㅏ

1. ch.10 상호작용
d3.js Moon.D

2. d3.js Moon.D
• Mouseover
• 정렬
• Tooptip
오늘의 공부

3. Mouseover
d3.js Moon.D

4. d3.js Moon.D
hover practice.html

5. d3.js Moon.D
CSS hover
<style type="text/css">
rect:hover {
fill: orange;
}
</style>

6. d3.js Moon.D
mouseover practice.html

7. d3.js Moon.D
.on(“mouseover”)
.on("mouseover", function() {
d3.select(this)
.attr("fill", "orange");
});
this : 작업중인 문서요소
이벤트 명 실행할 함수

8. d3.js Moon.D
.on(“mouseout”)
.on("mouseout", function(d) {
d3.select(this)
.attr("fill", "rgb(0, 0, " + (d * 10) + ")");
});

9. d3.js Moon.D
text 위에서 작동하지 않는다

10. d3.js Moon.D
text 위 작동해결
<style type="text/css">
svg text {
pointer-events: none;
}
</style>

11. Sort
d3.js Moon.D

12. d3.js Moon.D
sort practice.html

13. d3.js Moon.D
sortBars()
d3.select(“p")
.on("click", function() {
sortBars();
});
“p”를 클릭하면 다음의 함수를 실행한다

14. d3.js Moon.D
var sortBars = function() {
svg.selectAll("rect")
.sort(function(a, b) {
return d3.ascending(a, b);
})
.transition()
.duration(1000)
.attr("x", function(d, i) {
return xScale(i);
});
// 모든 rect를 선택한다

15. d3.js Moon.D
.sort(function(a, b) {
return d3.ascending(a, b);
})
sort() 데이터 값을 기반으로 재정렬
//(a, b) 코딩 관습
d3.ascending(a, b) 비교 함수
• 값이 큰 쪽을 내보냄
• 모든 데이터 에서 순회

16. d3.js Moon.D
svg.selectAll("rect")
.sort(function(a, b) {
return d3.ascending(a, b);
})
.transition()
.duration(1000)
.attr("x", function(d, i) {
return xScale(i)+ xScale.rangeBand() / 2;;
});
// 모든 text(라벨)를 선택한다
라벨도 정렬하자

17. d3.js Moon.D
p 문서요소를 클릭해보자

18. 반대방향 정렬도 해보자
d3.js Moon.D

19. d3.js Moon.D
var sortOrder = false;
var sortBars = function() {
sortOrder = !sortOrder;
svg.selectAll("rect")
.sort(function(a, b) {
if (sortOrder) {
return d3.ascending(a, b);
} else {
return d3.descending(a, b);
}
})
// 블리언 변수 : 차트의 현재 상태를 기억
// 클릭할때마다 false - true 로 번갈아 바뀐다
// sortOrder = true 일때
// sortOrder = false 일때

20. Tooltip
d3.js Moon.D
1. “title” 메서드
2. SVG
3. HTML

21. d3.js Moon.D
tooltip practice.html

22. d3.js Moon.D
.append(“title”)
.append(“title”)
.text(function(d) {
return d
});
//tooltip 메서드

23. d3.js Moon.D
SVG Tooltip

24. d3.js Moon.D
SVG로 Tooltip만들기
패쓰!

25. d3.js Moon.D
HTML Tooltip

26. d3.js Moon.D
div_tooltip.html

27. d3.js Moon.D
1. HTML div 생성
<div id="tooltip" class="hidden">
<p><strong>아래에 라벨이 표시됩니다.</strong></p>
<p><span id="value">100</span>%</p>
</div>

28. d3.js Moon.D
2. CSS 추가
absolute 일 때 위치를 완벽히 제어 가능

29. d3.js Moon.D
3. .on() 수정

30. 여러분 마음 알아요 ...
d3.js Moon.D