[D3] d3-force Many-body force 사용법

Many-body forceMany-body의 힘은 모든 노드에 상호 적용됩니다.forceManyBody()새로운 힘을 생성합니다.const manybody = d3.forceManybody()manybody.strength(strength)strength가 양수이면 중력을 시뮬레이션하고 음수이면 정전기 전하를 시뮬레이션하는 데 사용할 수 있습니다.양수이면 노드가 서로 끌어당기고 음수면 노드가 서로 밀어냅니다. 강도의 기본 값은 -30입니다.manybody.theta(theta)계산을 가속화하기 위해 이 힘은 정확성을 결정합니다.manybody.distanceMin(distance)노드 사이의 최소 거리를 설정합니다. 기본값은 1입니다.manybody.distanceMax(distance)노드 사이의 최..

• format_list_bulleted D3/시각화
• · 2024. 5. 8.
• textsms

[D3] d3-force Link force 사용법

Link force원하는 link 거리에 따라 연결된 노드를 함께 또는 분리하도록 밀어냅니다. 힘의 세기는 스프링과 유사하고 연결된 노드의 거리와 대상 거리의 차이에 비례합니다.forceLink(links)지정된 링크와 기본 매개변수를 이용하여 링크 force를 만듭니다. 링크가 지정되지 않을 경우 빈 배열입니다.link.links(links)링크가 지정된 경우 힘과 관련된 링크 배열을 설정하고 각 링크에 대해 distance 및 strength 매개변수를 다시 계산하고 반환합니다. 각 링크는 다음 속성을 가진 개체입니다.source - 링크의 소스 노드target - 링크의 대상 노드index - 링크 인덱스편의를 위해 링크의 source 및 target에 대한 속성은 개체 참조 대신 숫자 또는 문자열..

• format_list_bulleted D3/시각화
• · 2024. 5. 8.
• textsms

[D3] d3-force Collision force 사용법

Collision force충돌력은 노드를 점이 아닌 radius를 가진 원으로 취급하고 노드가 겹치는 것을 방지합니다.두 개의 노드 a와 b는 a(radius) + b(radius)가 되도록 분리됩니다.d3.forceCollide(radius)지정된 radius를 사용하여 새로운 충돌을 생성합니다.collide.radius(radius)radius가 지정된 경우 다시 radius를 평가한 후 반환합니다. 새로운 반경이 호출될 때만 재계산되고 힘을 적용할 때마다 다시 계산되지는 않습니다.collide.strength(strength)강도가 낮을수록 다음 틱에서 겹칠 것으로 예상되는 다른 노드를 밀어냅니다.collide.iterations(iterations)반복이 높게 지정된 경우 런타임 비용이 늘어나지..

• format_list_bulleted D3/시각화
• · 2024. 5. 8.
• textsms

[D3] d3-force Center force 사용법

Center force모든 노드의 평균 위치가 지정된 위치에 있도록 노드를 균일하게 이동합니다. 속도는 수정하지 않습니다.forceCenter(x, y)지정된 x, y 좌표를 사용하여 새로운 center force를 생성합니다.center.x(x)중심 위치의 x 좌표를 지정된 x로 설정하고 반환합니다.center.y(y)중심 위치의 y 좌표를 지정된 y로 설정하고 반환합니다.center.strangth(strength)힘의 강도를 설정합니다. 0.05의 강도는 움직임을 부드럽게 합니다. 강도가 지정되지 않은 경우 기본 값은 1입니다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

• format_list_bulleted D3/시각화
• · 2024. 5. 7.
• textsms

[D3] d3-force Force simulations 사용법

d3.forceSimulation(nodes)nodes 배열을 사용하고 forces를 사용하지 않고 새 시뮬레이션을 만듭니다. nodes배열은 객체를 담고 있는 배열입니다.시뮬레이션이 만들어지면 객체 안에 vx,vy,x,y,index가 만들어집니다. 시뮬레이션은 자동으로 실행됩니다. 실행되는 동안 이벤트를 수신하려면 Simulation.on을 사용하면 됩니다. 수동으로 실행할려면 Simulation.stop을 호출한 다음 Simulation.tick을 호출하면 됩니다.const nodes = [ {name: 1}, {name: 2}, {name: 3}, {name: 4}, {name: 5}]const simulation = d3.forceSimulation(nodes)simulati..

• format_list_bulleted D3/시각화
• · 2024. 5. 7.
• textsms

[D3] d3-contour Density estimation 사용법

contourDensity()새로운 밀도 추정기를 생성합니다.const density = d3.contourDensity()density(data)data 배열에 대한 밀도 윤곽을 추정하여 MultiPolygon 기하학 객체의 배열을 반환합니다.각 데이터 포인트의 x 및 y좌표는 density.x와 density.y를 사용하여 계산됩니다.const data = [1,2,3,4,5]d3.contourDensity()(data)density.xx좌표를 설정합니다.density.yy좌표를 설정합니다.density.weight(weight)가중치에 대한 설정값입니다.density.size(size)크기를 지정한 범위를 설정합니다. 최대 너비 x이고 높이는 y입니다.density.cellSize(size)Bin ..

• format_list_bulleted D3/시각화
• · 2024. 4. 29.
• textsms