D3 Force Layout의 최대 거리 제한은 무엇입니까?

Question

SVG 요소가 서로 겹치는 것을 방지하기 위해 음전하가 작은 힘 레이아웃을 사용하고 있습니다. 그러나 항목을 원본 위치의 약 20 픽셀 이내로 유지해야합니다. 항목이 이동하는 총 순 X/Y 거리를 제한하는 수단이 있습니까?

각 SVG 요소는 버스 정류장을 나타내므로 항목이 겹치지 않지만 원래 위치에서 너무 멀리 이동하지 않는 것이 중요합니다.

Answer 1

는 힘 레이아웃 자체에서이에 대한 옵션이 없습니다, 그러나 당신은 tick 이벤트 처리 기능에 아주 쉽게 자신이 작업을 수행 할 수 있습니다

force.on("tick", function() { 
    nodes.attr("transform", function(d) { 
    return "translate(" + Math.min(0, d.x) + "," + Math.min(0, d.y) + ")"; 
    }); 
}); 

이 상단 오른쪽으로 위치를 구속 것을 of (0,0). 분명히 다른 방법으로 바운드하도록 수정할 수도 있습니다 (잠재적으로 중첩 된 Math.min/Math.max). 요소로 허용 된 위치 범위를 저장하고이를 참조하여 동적으로 수행 할 수도 있습니다.

이 기법을 사용하여 강제 레이아웃을 사용하여 플로팅 된 레이블의 위치를 ​​제한하는 예제는 here을 참조하십시오.