반응형
D3.js DATA 사용법
D3.js는 script 단에서 data의 값을 정의해서 사용할 수 있다. 이때 배열 형태로만 저장 후 사용해야 된다.
기본 예제)
<!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>
<p></p>
<script>
//data(), enter(), exit(), datum() - 선택한 요소에 데이터를 삽입
myData = 100 // 상수 값으로는 데이터 바인딩이 안된다.
myData = [100] // 데이터는 이런형태로 넣어줘야 한다.
d3.select('p') // 하나의 객체에 접근할때
.data(myData) //데이터 바인딩하는 부분이다. data를 mydata로 쓴다는 부분이다.
.text(function(d,idx){ //text를 넣겠다는 부분인데 이 text에 들어가는 값을 function의 반환값으로 정해진다.
// d = data / idx = index 를 정의하는 말이다.
return d; // data 값을 리턴해준다. 여기서는 100을 리턴한다.
})
</script>
</body>
</html>
심화 예제)
<!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>
<p></p>
<p></p>
<p></p>
<div>
<p>Error : This is Error</p>
<p>Warning : This is Warning</p>
</div>
<script>
data = [100,200,300] //data 값을 정의한다.
d3.select('body') // d3를 통해 body를 select 하고
.selectAll('p') // 그 안에 있는 p 태그 값들을 모두 가져온다.
.data(data) // 이 부분은 데이터를 바인딩 하는 부분이다. 여기서 위에 정의한 data를 사용하겠다는 뜻이다.
.text(function(d,idx){ // text를 넣는데 text에 들어가는 값을 function을 결과 값을 넣는다.
// 여기서 d는 데이터를 뜻하고 idx는 index를 뜻한다. 이건 그렇게 정의되어 있는 부분이다.
console.log('index : '+idx) // console.log 를 통해 idx 값을 확인하고
console.log('data : '+d) // console.log 를 통해 data값을 확인한다.
console.log('this : '+this) // 여기서 this 는 자기자신을 의미
return d // data = d 값을 반환한다.
})
//value를 동적으로 작업할수 있다.
d3.selectAll('div > p').style('color',function(d,idx){//d3를 통해 selectall해 해당하는 부분을 모두가져온다.
// 여기서는 div 안에 있는 p 태그를 모두 가져오는데 이 p 태그에 style을 입히는데 해당 'color'에 대한 value 값을 function으로
// 지정해준다. 여기서도 d, idx로 data 와 index 값을 가져온다
txt = this.innerText ; //내부에 자기 자신을 가져온다. 그 값을 txt에 넣고
//window.alert(txt)
// 여기서 txt의 내장함수인 indexOf는함수는 문자열에서 원하는 문자열을 검색하여 찾거나 아니면 배열에서 원하는 특정 배열값의
// 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수로 사용된다.
if(txt.indexOf('Error') >= 0) { // 이 값이 0이 아닐때 즉 존재할 때
return 'red'; // red로 해당 p 부분의 style을 바꿔준다
}
if(txt.indexOf('Warning') >= 0) {
return 'blue';
}
}) //style tag 는 key value 형태이다. d는 현재 선택된 엘리먼트를 의미한다.
</script>
</body>
</html>
그 결과 위와 같은 결과가 나오게 된다.
<!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>
<p></p>
<p></p>
<p></p>
<script>
myData = [100,200,300,400,500] // 태그에 개수에 맞춰 출력 된다.
d3.selectAll('p') // d3를 통해 모든 p태그를 가져온다.
.data(myData) // 데이터 바인딩 하는 부분이다
.text(function(d,idx){ // text로 글자를 입력하는데 그 글자들은 fuction의 반환값을 입력한다.
return d; // data 값을 반환해준다.
})
data = [1,2,3,4,5]
d3.select('body') // d3를 통해 body를 select한 뒤
.selectAll('span') // 모든 span 태그를 가져온다.
.data(data) // 그 후 데이터를 바인딩하고 ([1,2,3,4,5])
.enter() // data의 개수 맞춘다는 뜻이다. 이 말은(여기서 data의 길이만큼 span을 만든다.
.append('span') // 여기서 span을 추가하는데 위의 data개수인 5개를 맞춰 span을 5개 추가한다.
//.text(function(d,idx){
// console.log(idx)
// return d ;
.style('color',function(d){ // 그리고 이 span의 style은 funciont의 값으로 결정되는데
if(d%2==0){ // data나누기 2했을 때 값이 0 이면 green으로
return 'green';
} else {
return 'red'; // 아닐겨우 초록으로 나타낸다.
}
})
.text(function(d,idx){
return d ;
})
</script>
</body>
</html>
결과는 이렇게 나오게 된다.
반응형
'Base > WEB' 카테고리의 다른 글
| [WEB] D3.js 데이터 읽어오는 방법(csv,Json) - 4 (0) | 2020.09.14 |
|---|---|
| [WEB] D3.js Event, Aninmation 사용법 - 3 (0) | 2020.09.14 |
| [WEB] D3.js 기본 개념 및 사용법 - 1 (0) | 2020.09.14 |
| [WEB] Javascript로 HTML 태그(DOM) 접근하기 (0) | 2020.09.13 |
| [WEB] HTML 기본 개념(html,css,script) (0) | 2020.09.13 |
