d3: d3를 이용한 컴포넌트에서 animation 효과 제외하기

Problem:

d3를 이용해서 버블 차트를 만들었는데, 오픈소스를 참고해서 만들다 보니 내 입맛에 딱 맞는 것이 아니라 열심히 다시 맞추어 개발하는 과정에서, 원래 들어가 있는 애니메이션이 toomuch 라서 애니메이션을 없앨 수 없을까 했다. 그래서 찾은 방법이 아래의 방법이다. 의외로 간단했다. 코드 한 줄이면 애니메이션 기능을 완전히 없앤 채로 화면에 고정해서 넣을 수 있었다.

 

Solve:

일단 버블 차트를 시뮬레이트 하는 함수 안에서 강제로 포지션을 줘서 움직이게 하는 부분을 제외하고 (먼저 지우고) 아래와 같이 tick() 메소드를 사용하면 동작을 멈추는 것을 볼 수 있었다.

 this.simulation = d3
            .forceSimulation()
            .nodes(data as SimulationNodeDatum[])
            .force('x', d3.forceX().strength(0.2))
            .force('y', d3.forceY().strength(0.2))
            .force(
                'collide',
                d3.forceCollide((d: SimulationNodeDatum) => {
                    return this.radiusScale((d as BubbleChartTypes.ForceData).size) + 2
                })
            )
            .on('tick', () => {
                this.setState({ data })
            })
            .tick(300)  //this line

 

참고글

How to disable animation in a force-directed graph?