React Native #4 UI 개발하기
2018-11-15
D3.js 를 사용하여 데이터 시각화하기 #5 Area Charts + 그라데이션 + 도트
2020-07-16
Explanation
오늘은 오랜만에 D3js를 사용한 차트만들기!
이번 포스팅은 D3를 사용해서 영역 차트를 만들고, 영역에 그라데이션도 넣어보고 거기에 도트도 추가해 보려 합니다.
라인 차트는 예전에 만들었던 것에서 스타일만 약간 수정했어요.
https://falsy.me/d3-js-를-사용하여-데이터-시각화하기-1-line-charts/
간단하게 달라진 부분만 살펴보면,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... const area = d3.area() .x(d => x(d.date)) .y0(y(0)) .y1(d => y(d.value)); ... svg.append("path") .datum(data) .attr("fill", "#7ab8aa") .attr("stroke", "#add7a8") .attr("stroke-width", 6) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) .attr("d", area); |
영역을 그릴 값이 추가 되었죠, ‘d3.area()’값으로 영역을 그린거에요. x값은 data의 date의 값의 위치로 y값은 y1 값을 0부터 y1에 data의 value 값으로 지정해줘서 영역을 가질 수 있게 해줬답니다. 그리고 avg에 ‘fill’값에 색상을 정해주고 ‘line’과 ‘area’값을 추가해 주었답니다.
그런데 이렇게 되면 선이 아래를 쭉 감싸고 있어서 보기 이쁘지 않죠, 그래서 ‘line’값과 ‘area’값을 따로 그리면 조금 더 보기 좋게 그릴 수 있답니다.
코드를 살펴보면 아래와 같아요.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... svg.append("path") .datum(data) .attr("fill", "#7ab8aa") .attr("d", line) .attr("d", area); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#add7a8") .attr("stroke-width", 6) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.node(); |
추가된 코드는 아래와 같답니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
... const grad = svg.append("defs").append("linearGradient") .attr("id", "grad") .attr("x1", "0%") .attr("x2", "0%") .attr("y1", "0%") .attr("y2", "100%"); grad.append("stop") .attr("offset", "0%") .style("stop-color", "#7ab8aa") .style("stop-opacity", 1); grad.append("stop") .attr("offset", "100%") .style("stop-color", "#7ab8aa") .style("stop-opacity", 0.4); svg.append("path") .datum(data) .style("fill", "url(#grad)") .attr("d", line) .attr("d", area); ... |
조금 설명을 적자면… 코드에 있는 내용 그대로지만,
id값이 ‘grad’라는 ‘linearGradient’를 만들고 svg에 style값으로 ‘#grad’를 주었답니다.
도트를 추가하는 건 간단하답니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
... svg.append("g") .selectAll("dot") .data(data) .enter() .append("circle") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .attr("r", 5) .attr("stroke", '#5487b1') .attr("stroke-width", 4) .attr("fill", "white") ... |
