[D3] 이클립스 오류 해결 방법, 참고 사이트 모음 / 학습 노트

 

D3 이클립스 오류 해결법

• 과정 : CDN 넣고, div에 class 이름 정의하고, 아래에 명시한 '가장 처음 참고'라는 사이트 참고해서 스크립트 작성한 뒤 실행했더니 나오는 스크립트 오류
• d3.pie is not a functio
• 회사는 D3 v3을 사용하는데, 내가 가져온 코드는 더 윗버전 같아서 (2021년 7월 기준 D3는 v7까지 나옴.) 자료 찾아가면서, 코드 읽어가면서 임의로 코드 변경 중.

참고 : https://github.com/benkeen/d3pie/issues/125

 

D3 도넛차트 구현

 

가장 처음 참고 : https://codelib.tistory.com/11

→ 위의 d3.pie is not a function 오류 남.

 

두 번째 참고 : https://using.tistory.com/56

→ var group = canvas.append("g") 블라블라 코드에서 canvas에 오류 떠서, canvas를 svg로 바꿨더니 잘 뜸.

→ var arc = d3.svg.arc().innerRadius(40).outerRadius(150); 이 안 먹힘. 크롬 개발자도구 콘솔에는 아무 오류가 안 보이는 중. 그래서 밑에 코드 좀 추가했더니 드디어 <g class="arc"></g>까지는 됨. 이 아래가 안 나오네.

 

이제 여기서부터 해보자. D3 하나씩 해내가는 재미가 있다.

 

(하프)도넛차트 그래프 게이지 움직이게 하기

var duration=1000;
var innerRadius;

arcs.append("svg:path")
	.attr("fill", function(d,i){
        return color[i];
        })
    .transition()
    .duration(duration)
    .attrTween('d',function(d,i){
        d.innerRadius=0;
        var i = d3.interpolate({startAngle:0,endAngle:0},d);
        return function(t){
            return arc(i(t));
		}
	});

 

 

ShowType 종류

"value", "percent"가 있음.

 

하프도넛 구현

.startAngle(-90 * Math.PI/180))
.endAngle(90 * Math.PI/180))

 

 

D3 (하프)도넛 차트와 데이터 연동

(하프)도넛 차트 그린 .jsp의 <script></script> 사이에 코드 작성.

wrChart.js 이용해야 함.

 

---

원형/반원형차트 v3에서 v4로 버전업

 

- d3-tip.js (v4용 without ES6)

https://github.com/VACLab/d3-tip

→ 여기서 다운로드 받음. 작동 잘 함.

 

https://gist.github.com/davegotz/bd54b56723c154d25eedde6504d30ad7

 

http://bl.ocks.org/davegotz/bd54b56723c154d25eedde6504d30ad7

 

https://blog.devari.kr/2017/publishing/d3-js-one-graph-pie-chart

→ 이거 참고해서 v3 문법을 v4 문법으로 바꿀 수 있음.

https://webxtutor.com/article-zLIqSQEiFwXK2Sxb7Q0w-Half-Donut-chart-using-Javascript-library-D3.js-V4-

 

---

D3 참고 사이트

 

https://d3js.org/

 

 

https://mynameisdabin.tistory.com/15

 

- D3 interpolate 보간법

https://runebook.dev/ko/docs/d3/d3-interpolate

 

https://steemit.com/dclick/@codingman/d3js-d3interpolate--1546820876507

 

- (하프)도넛차트 그래프 게이지 (증가하면서) 움직이게 하기

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jhc9639&logNo=220959542033 

 

https://www.debugcn.com/ko/article/43096506.html

 

- D3 도넛차트 slices에 텍스트 추가

https://observablehq.com/@d3/donut-chart

 

- D3 도넛차트(원형) 중앙에 텍스트 넣기

https://littletechblogger.wordpress.com/2014/10/21/d3-donut-chart-with-labels-using-angular-directive-and-json-data-example/