적용방법
1. D3 cdn 구글 검색 > https://cdnjs.com/libraries/d3 접속
2. https............min.js 주소 복사
3. html <head> 에 추가
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
4. 웹사이트 예제 소스 입력
예제
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
<script type="module" src="main.js"></script>
</head>
<body>
<svg style="border: 1px solid" width='100%' height='50vh'></svg>
<!-- <svg style="border: 1px solid red;"></svg> -->
</body>
</html>
2. main.js
const dataset = [100, 150, 80, 180, 120, 30, 300, 280, 200];
render();
window.addEventListener('resize', render);
function render(){
const svg = d3.select('svg');
const svgWid = svg.node().getBoundingClientRect().width;
const svgHt = svg.node().getBoundingClientRect().height;
const initPos = 100;
const barWid = (svgWid - initPos*2) / dataset.length ;
const barPadding = 10;
/************************************************* */
// 세로로 표시하기
const xPercent = d3
.scaleLinear() // 비율화 준비
.domain([0, d3.max(dataset)]) // 데이터를 비율화. (최소, 최대)
.range([0, svgHt - 30]); // 데이터가 출력된 프레임을 비율화
//기존에 그렸던 것을 초기화
svg.selectAll('text').remove();
svg.selectAll('rect').remove();
svg
.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('y', (d) => svgHt - xPercent(d))
.attr('x', (d,i)=> i*barWid + initPos)
.attr('height', (d) => xPercent(d)) //xPercent 함수를 이용하여 각 수치 값을 전달시 자동으로 제일 큰 수치 값을 기준으로 백분율화
.attr('width', barWid - barPadding)
.attr('fill', 'pink');
svg
.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', (d,i) => i*barWid + initPos + (barWid - barPadding)/2)
.attr('y', (d)=> svgHt - xPercent(d) + 15)
.attr('text-anchor', 'middle')
.text((d)=>d) //text 출력
.attr("font-size", "15px")
}
심화 예제
3. main.js
const dataset = [100, 150, 80, 180, 120, 30, 300, 280, 200];
render(100, 10, 200, 1000);
window.addEventListener('resize', () => render(100, 10, 0, 1000));
function render(initPos=100, barPadding=10, interval=0, speed=1000){
const svg = d3.select('svg');
const svgWid = svg.node().getBoundingClientRect().width;
const svgHt = svg.node().getBoundingClientRect().height;
const barWid = (svgWid - initPos*2) / dataset.length ;
// const initPos = 100;
// const barPadding = 10;
// const interval = 200;
// const speed = 1000;
/************************************************* */
// 세로로 표시하기
const Percent = d3
.scaleLinear() // 비율화 준비
.domain([0, d3.max(dataset)]) // 데이터를 비율화. (최소, 최대)
.range([0, svgHt - 30]); // 데이터가 출력된 프레임을 비율화
//기존에 그렸던 것을 초기화
svg.selectAll('text').remove();
svg.selectAll('rect').remove();
svg
.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('y', svgHt)
.attr('x', (d,i)=> i*barWid + initPos)
.attr('height', 0) //Percent 함수를 이용하여 각 수치 값을 전달시 자동으로 제일 큰 수치 값을 기준으로 백분율화
.attr('width', barWid - barPadding)
.attr('fill', 'pink')
.transition()
.delay((d, i) => i* interval)
.duration(speed)
.attr('y', (d) => svgHt - Percent(d))
.attr('height', (d)=>Percent(d));
svg
.selectAll('text')
.data(dataset)
.enter()
.append('text')
.attr('x', (d,i) => i*barWid + initPos + (barWid - barPadding)/2)
.attr('y', (d)=> svgHt - Percent(d) + 20)
.attr('text-anchor', 'middle')
.text((d)=>d) //text 출력
.attr("font-size", "15px")
.attr('fill', 'transparent')
.transition()
.delay((d, i) => i* interval + speed)
.duration(speed)
.attr('fill', 'black');
}
도넛 예제
index
<body>
<svg width="70%" height="80vh" style="border: 1px solid gray"></svg>
</body>
main
const dataset = [600, 150, 80, 180, 120, 400, 280];
// 이벤트 바인딩
renderPie({ innerRadius: 50 });
window.addEventListener("resize", renderPie);
// 파이차트 렌더링 함수
function renderPie({ innerRadius = 0, interval = 0, speed = 1000 }) {
const svg = d3.select("svg");
const width = svg.node().getBoundingClientRect().width;
const outerRadius = (width * 0.7) / 2; // SVG 폭의 70% 크기로 outerRadius 설정
const height = outerRadius * 2 + 50; // outerRadius 기반으로 높이값 재설정, 50은 약간의 여유 여백
const centerX = width / 2;
const centerY = height / 2;
// svg 프레임의 높이를 다시 설정
svg.attr("height", height);
svg.selectAll("*").remove();
const pie = d3.pie();
const pieData = pie(dataset);
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
const color = d3.scaleOrdinal(d3.schemeSet3);
svg
.selectAll("path")
.data(pieData)
.enter()
.append("path")
.attr("d", arc)
.attr("fill", (d, i) => color(i))
.attr("transform", `translate(${centerX}, ${centerY})`)
.attr("opacity", 0)
.transition()
.delay((d, i) => i * interval)
.duration(speed)
.attr("opacity", 1);
svg
.selectAll("text")
.data(pieData)
.enter()
.append("text")
.text((d) => d.data)
.attr("transform", (d) => {
const [x, y] = arc.centroid(d);
return `translate(${centerX + x}, ${centerY + y})`;
})
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.style("font-size", "14px")
.style("fill", "black")
.attr("opacity", 0)
.transition()
.delay((d, i) => i * interval + speed / 2)
.duration(speed)
.attr("opacity", 1);
}
Tags:
웹개발_Tool
