D3.js forceSimulation 좌표 갱신 알고리즘/실행 함수

D3.js forceSimulation의 좌표 갱신 알고리즘/실행 함수를 설명한다.
Tags:

노드 간의 상호 작용력 설정에 대해서는 여기를, 링크 설정에 대해서는 여기를 확인한다.

좌표 업데이트 정보

D3.js의 forceSimulation은 원점은 (0, 0)으로 하고, 1스텝의 위치 변화량을 (vx, vy)로 하면 다음의 함수로 위치 변화량을 계산한다.

function force(alpha) {
  for (var i = 0, n = nodes.length, node, k = alpha * 0.1; i < n; ++i) {
    node = nodes[i];
    node.vx -= node.x * k;
    node.vy -= node.y * k;
  }
}

원점(지정한 x, y)으로부터의 거리에, alpha * 0.1을 곱한 분의 좌표를 업데이트한다. alpha가 1이면 10%씩 원점에 가까워지도록 움직인다.

또한 alpha는 시뮬레이션의 1스텝마다 아래 식이 더해지고 업데이트된다.

( alphaTarget – alpha ) * alphaDecay

기본 alphaTarget은 0, alphaDecay는 0.0228이므로 서서히 alpha가 감소한다. 이 alpha가 alphaMin(기본값 : 0.001) 아래로 떨어지면 시뮬레이션이 중지된다. 기본적으로 약 300회 반복 계산이 수행되는 설정이다. 다음 기능을 사용하여 이러한 설정과 시뮬레이션 실행을 제어할 수 있다.

simulation 실행 함수

함수 설명
simulation.restart() 시뮬레이션을 다시 시작한다.
드래그 등의 이벤트 발생시에 정지한 시뮬레이션을 기동하려고 할 때에 사용한다.
simulation.stop() 시뮬레이션을 중지한다.
이미 중지된 경우에는 아무 동작도 수행하지 않는다.
simulation.tick() 시뮬레이션의 내부 함수이다.
시뮬레이션 작성시 또는 restart()에 의해 호출된다.
simulation.node() 노드를 지정한다.
사용 방법은 여기를 참조한다.
simulation.alpha() alpha의 값을 0.0 ~ 1.0 사이로 설정한다.
기본값은 1이다.
값을 지정하지 않으면 현재 alpha 값을 반환한다.
simulation.alphaMin() alphaMin 의 값을 0.0 ~ 1.0 사이로 설정한다.
기본값은 0.001이다.
값을 지정하지 않으면 현재 alpha 값을 반환한다.
시뮬레이션은 현재 alpha 가 alphaMin 보다 작을 때 중지된다.
simulation.alphaDecay() alphaDecay의 값을 0.0 ~ 1.0 사이로 설정한다.
기본값은 0.0228(=1-pow(0.001, 1/300))이다.
값을 지정하지 않으면 현재 alphaDecay 값을 반환한다.
alphaDecay가 클수록 시뮬레이션은 더 빨리 수렴하지만, 국소 솔루션에 머무를 수 있다.
alphaDecay의 값을 줄이면 시뮬레이션을 실행하는데 시간이 오래 걸리지만 더 나은 레이아웃으로 수렴한다.
시뮬레이션을 영구적으로 계속하려면 alphaDecay 를 0으로 설정하거나 alphaTarget을 alphaMin 보다 큰 값으로 설정한다.
simulation.alphaTarget() alphaTarget 의 값을 0.0 ~ 1.0 사이로 설정한다.
기본값은 0이다.
값을 지정하지 않으면 현재 alphaTarget 값을 반환한다.
simulation.velocityDecay() 노드의 속도 감쇠 계수를 설정한다.
0.0 ~ 1.0의 값을 설정할 수 있다.
값이 설정되어 있지 않은 경우는, 현재의 속도 감쇠 계수를 돌려준다.
기본값은 0.4이다.
현재의 속도에 (1- velocityDecay )의 값이 곱해지고, 값이 클수록 속도 감쇠가 커진다.
0으로 설정하면 노드가 계속 진동하고 1로 설정하면 속도가 변하지 않는다.
simulation.force() 노드 간 및 링크 상호 작용을 설정하는 함수이다.
노드 사이는 여기를, 링크는 여기를 참조한다.
simulation.find(x,y[,radius]) 지정된 검색 반경에서 위치(x, y)에 가장 가까운 노드를 반환한다.
radius를 지정하지 않으면, 탐색 반경이 무한대가 된다.
검색 영역에 노드가 없으면 undefined를 반환한다.
simulation.on(typenames, [listener]) 이벤트 리스너를 등록한다.
이벤트 리스너가 이미 같은 타입과 이름으로 등록되어 있는 경우, 새로운 리스너를 덮어쓴다.
listener가 null의 경우이면, 이벤트 리스너를 삭제한다.
typenames는 "tick"과 "end"를 지정할 수 있다.
  • tick: 시뮬레이션 단계 업데이트 시간
  • end: 시뮬레이션 완료시(alpha < alphaMin)

부록: 용어

decay

  1. [명사] 부패, 부식
  2. [명사] (사회제도 등의) 쇠퇴[퇴락]
  3. [동사] 부패하다, 썩다; 부패시키다, 썩게 만들다 (=rot)
  4. [동사] (건물지역이) 퇴락하다

velocity

  1. [명사][전문 용어] 속도
  2. [명사][격식] 빠른 속도

tick

  1. [동사] 째깍(똑딱)거리다
  2. [동사] (정답 등에) 체크 표시(✓)를 하다
  3. [명사] 체크 표시(✓) (→cross, X (4))
  4. [명사] 진드기



최종 수정 : 2024-01-18