반응형
Event
마우스 이벤트에 따라
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src='https://d3js.org/d3.v4.min.js'></script>
<style> // style 부분 작성
div{ // 모든 div 태그에 대해 적용
height : 100px;
width : 100px;
background-color : blue;
margin : 5px;
}
</style>
</head>
<body>
<div></div>
<hr/>
<div id = 'container'></div> // container라는 id를 가지고 있는 div 태그
<script>
//code
// on(eventName, function())
d3.select('div') //d3를 통해 div를 하나 가져온다.
.on('mouseover', function(){ //on - mouseover를 이벤트를 통해 마우스를 올렸을때 이벤트가 발생한다.
// 그 이벤트는 function에 정의되고
d3.select(this).style('background-color','orange'); //this를 통해 자기자신 가르키게 되고 스타일을 orange로 바꾼다.
console.log(d3.event)
console.log(d3.mouse(this))
})
.on('mouseout',function(){ // mouseout 으로 마우스를 뗐을때 이벤트가 발생
d3.select(this).style('background-color','blue'); // 자기자신을 가르키고 blue 색깔을 가져온다.
console.log(d3.event)
console.log(d3.mouse(this))
})
d3.select('#container') // d3를 통해 container라는 id 값을 가진 객체를 가져온다.
.transition() // transition 통해 함수가 발생되는 속도 조절을 한다는 뜻
.duration(2000) //2초의 딜레이를 가지고 객체가 변화하게 된다.
.style('background-color','red') //여기서는 red로 바뀐다.
//이렇게 들어가는 값을 미리 넣어주는 형식도 가능
t = d3.transition().duration(5000) // 변화하는 속도가 5초다.
d3.select('#container')
.transition(t) //함수가 바뀌는데 있어서의 속도 조절을 한다는 뜻
.style('background-color','red') // 빨간색으로 바뀌게 한다.
</script>
</body>
</html>
이런식으로 표현된다. body에 값은 없지만 scrip 단에서 동적으로 페이지가 변화한다.
Aninmation
Aninmation을 하기 위해서는 svg를 알아야 한다.
SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML-based image format
svg의 장점
- SVG기반의 전문 그래픽 프로그램에서 나온 산출물을 그대로 활용할 수 있다
- 검색화, 목록화, 스크립트화가 가능하고, 필요하면 압축도 가능하다
- 확대/축소시 퍼짐 현상이 없고 품질의 손상이 없다
아래는 svg 를 통한 간단한 애니메이션 예제이다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src='https://d3js.org/d3.v4.min.js'></script>
</head>
<body>
<script>
// svg - 시각화를 위한 태그영역
svg = d3.select('body')
.append('svg') // svg라는 것을 추가한다.
.attr('width',500) // width 속성의 값을한다.
.attr('height',500) // height 속성 값을 준다
bar1 = svg.append('rect') // SVG에 rect
.attr('fill','red') // fill 속성을 red로 바꾸는데
.attr('x',100) // x 축에서 100부터
.attr('y',20) // y축에서 20RKwl
.attr('height',20) // height 20
.attr('width',10) // width 10
bar2 = svg.append('rect')
.attr('fill','red')
.attr('x',120) //축 시작이 120 qnxj
.attr('y',20)
.attr('height',20)
.attr('width',10)
update() //update라는 function을 실행한다.
function update(){ // update 함수에 대해 정의
bar1.transition() //bar1이 변화하는데 있어서
.ease(d3.easeLinear) //ease - 선을 그리는 함수를 사용하고 선을 긋는다.
.duration(2000) //2초의 시간을 두고
.attr('height',100) //height 100까지 긋는다.
bar2.transition()
.ease(d3.easeLinear)
.duration(2000) //2초 동안
.delay(2000) // 2초 후에 진행되게 한다.
.attr('height',200) // height가 200까지 증가한다
}
</script>
</body>
</html>
위와 같이 그려지게 된다.
참조: https://pubdata.tistory.com/128 [Data, Business, 아빠의 육아 스탬프]
반응형
'Base > WEB' 카테고리의 다른 글
| [WEB] D3.js 기본적인 차트 및 구글 차트 그리기 - 5 (0) | 2020.09.14 |
|---|---|
| [WEB] D3.js 데이터 읽어오는 방법(csv,Json) - 4 (0) | 2020.09.14 |
| [WEB] D3.js 에서 Data 사용법 - 2 (0) | 2020.09.14 |
| [WEB] D3.js 기본 개념 및 사용법 - 1 (0) | 2020.09.14 |
| [WEB] Javascript로 HTML 태그(DOM) 접근하기 (0) | 2020.09.13 |
