Records of study, records of worries, archives
d3. svg 위에 hover시 div로 툴팁 만들어 넣기
Category.
React
Date.
2022-10-9 11:56
Tag.
#d3 #javascript #react #typescript
| use d3 with svg | d3로 개발한 bubble chart의 필요한 기능 중에 hover 시에 그 위로 bubble chart에 대한 정보들을 담은 툴팁이 나오도록 해야 했다. 그래서 고민이 많았다. 일단 svg위에 div를 위치 시켜야 하는건가? 그럼 svg 컴포넌트의 좌표를 일일히 다 정해 줘야 하는 거 아닌가? d3를 잘 다뤄 본 적도 없고 svg로 만든 컴포넌트들을 잘 다뤄 볼 일도 없어서 고민이 많았다. |
| ire4564 #1 record |
d3. d3를 이용한 컴포넌트에서 animation 효과 제외하기
Category.
React
Date.
2022-10-9 11:41
Tag.
#d3 #javascript #react #typescript
| use d3 with component animation | d3를 이용해서 버블 차트를 만들었는데, 오픈소스를 참고해서 만들다 보니 내 입맛에 딱 맞는 것이 아니라 열심히 다시 맞추어 개발하는 과정에서, 원래 들어가 있는 애니메이션이 toomuch 라서 애니메이션을 없앨 수 없을까 했다. 그래서 찾은 방법이 아래의 방법이다. 의외로 간단했다. 코드 한 줄이면 애니메이션 기능을 완전히 없앤 채로 화면에 고정해서 넣을 수 있었다. |
| ire4564 #2 record |
React. Error Maximum update depth 문제
Category.
React
Date.
2022-10-9 11:36
Tag.
#react #typescript
| Error Maximum update depth with React | 문제는 렌더링을 강제하는 코드를 테스트 하던 도중에, 이 코드를 어디다가 넣어야 내가 원하는 것처럼 동작을 할 지 그게 문제였다. 그런데, 제대로 동작을 하리라고 생각했던 곳에 넣었는데도 해결은 커녕 Maximum update depth 문제가 생겼다. 물론 이렇게 해서 나온 문제였으나 (근본적으로 이것이 문제가 아니라서 해결이라고 하기에도 뭐하지만) 이런 오류가 난 김에 이 문제에 대해서 생각해 보게 되었다. |
| ire4564 #3 record |
Echart. all show label, setting interval
Category.
React
Date.
2022-10-2 11:15
Tag.
#TypeScript #Echart #React
| Use Echart setting label & Interval | 데이터 시각화를 할 일이 많아서 주로 echart 라이브러리를 많이 사용하고 있는데, 세부적으로 계속 설정해 주어야 하는 부분들이 꽤 있어서 다루기가 번거롭다. 그때마다 공식 문서를 찾아보고는 하지만, 이해가 잘 안 될 때도 있는데 이번에도 문제에 봉착했다. echart는 편리하게 되어 있어서 글자가 겹칠 것 같으면 label을 띄워주지 않고 띄엄띄엄 보여주는데, 나는 모든 x축의 라벨 값을 보고 싶었다. |
| ire4564 #4 record |
JS. svg text tag 관련 <br/> 먹히지 않는 현상
Category.
Javascript
Date.
2022-9-28 11:59
Tag.
#Javascript #svg #React
| Use JS with svg tag, text tag <br> | 위의 두 가지 글을 참고했다. bubble chart를 위와 같은 형식으로 만들 일이 있었는데, 아래처럼 컴포넌트 내에서 처리를 해서 줄바꿈을 하려고 해도 먹히지 않는 현상이 발생하였다. |
| ire4564 #5 record |