issues
search
boostcampwm-2022
/
Web35-CryptoGraph
실시간 암호화폐 데이터 시각화 웹 서비스
19
stars
4
forks
source link
Issue#8/candle chart represent data(grid)
#27
Closed
kongyb
closed
1 year ago
kongyb
commented
1 year ago
개요
캔들차트에 격자생성
작업사항
d3.axis의 tickSizeInner메서드 활용하여 격자 생성(scale의 값마다 lin길이 지정)
D3.axis
격자 생성이후, 캔들차트의 움직임에 격자가 맞지 않는 문제 수정
기존의 줌/패닝 구현 로직에서는 data배열의 시작인덱스와 차트에 그려지는 캔들의 갯수를 상태로 관리하여 차트를 업데이트했다.
차트의 끝 부분이 정확히 캔들의 끝과 동일하지 않을 경우 격자와 캔들이 맞지 않는 문제
해결하기 위해 상태로 관리하는 renderOption에 translateX속성을 추가하여 캔들의 시작과 끝부분에 온전하지 못한 캔들이 있는지 확인하고 axis의 scale을 조정하는 방식으로 수정하였다.
개요
작업사항