[문디 10주차] d3.js 상호작용

ch.10 상호작용

d3.js Moon.D

d3.js Moon.D

• Mouseover

• 정렬

• Tooptip

오늘의 공부

Mouseover

d3.js Moon.D

d3.js Moon.D

hover practice.html

d3.js Moon.D

CSS hover

<style type="text/css">

rect:hover {

fill: orange;

}

</style>

d3.js Moon.D

mouseover practice.html

d3.js Moon.D

.on(“mouseover”)

.on("mouseover", function() {

d3.select(this)

.attr("fill", "orange");

});

this : 작업중인 문서요소

이벤트 명 실행할 함수

d3.js Moon.D

.on(“mouseout”)

.on("mouseout", function(d) {

d3.select(this)

.attr("fill", "rgb(0, 0, " + (d * 10) + ")");

});

d3.js Moon.D

text 위에서 작동하지 않는다

d3.js Moon.D

text 위 작동해결

<style type="text/css">

svg text {

pointer-events: none;

}

</style>

Sort

d3.js Moon.D

d3.js Moon.D

sort practice.html

d3.js Moon.D

sortBars()

d3.select(“p")

.on("click", function() {

sortBars();

});

“p”를 클릭하면 다음의 함수를 실행한다

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를 선택한다

d3.js Moon.D

.sort(function(a, b) {

return d3.ascending(a, b);

})

sort() 데이터 값을 기반으로 재정렬

//(a, b) 코딩 관습

d3.ascending(a, b) 비교 함수

• 값이 큰 쪽을 내보냄

• 모든 데이터 에서 순회

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(라벨)를 선택한다

라벨도 정렬하자

d3.js Moon.D

p 문서요소를 클릭해보자

반대방향 정렬도 해보자

d3.js Moon.D

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 일때

Tooltip

d3.js Moon.D

1. “title” 메서드 2. SVG 3. HTML

d3.js Moon.D

tooltip practice.html

d3.js Moon.D

.append(“title”)

.append(“title”)

.text(function(d) {

return d

});

//tooltip 메서드

d3.js Moon.D

SVG Tooltip

d3.js Moon.D

SVG로 Tooltip만들기

패쓰!

d3.js Moon.D

HTML Tooltip

d3.js Moon.D

div_tooltip.html

d3.js Moon.D

1. HTML div 생성

<div id="tooltip" class="hidden">

<p><strong>아래에 라벨이 표시됩니다.</strong></p>

<p><span id="value">100</span>%</p>

</div>

d3.js Moon.D

2. CSS 추가absolute 일 때 위치를 완벽히 제어 가능

d3.js Moon.D

3. .on() 수정

여러분 마음 알아요 ...

d3.js Moon.D