D3 JS 기초
2023. 2. 14. 20:45ㆍ졸논 백업
다운로드
http://d3js.org 에서 직접 라이브러리를 다운받아 폴더에 넣거나
이렇게 CDN방식으로 스크립트 태그에 넣어서 사용할 수 있다.
첫 작성 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3 테스트</title>
</head>
<body>
<svg width="500" height="500"></svg>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
const data = [5, 10, 15,20,70];
const svg = d3.select('svg');
data.forEach((d,i) => {
svg.append('rect')
.attr('height', data[i])
.attr('width',40)
.attr('x', 50*i)
.attr('y',100-data[i])
})
</script>
</body>
</html>간단하게 데이터를 리스트에 넣고 리스트 크기만큼 막대를 생성하는 예제다.
svg 태그는 벡터 이미지를 생성하는 태그다. 색상변경은 css로 스타일을 지정해주면 된다.
'졸논 백업' 카테고리의 다른 글
| JavaScript basic (0) | 2023.02.14 |
|---|---|
| ZeroNet 동작 방식 (0) | 2023.02.14 |
| 비트토렌트 동작 방식 (0) | 2023.02.14 |
| Zeronet content.db structure (0) | 2023.02.14 |
| PyGeoIP 사용하기 (0) | 2023.02.14 |