크기 기반의 요금 - d3 강제 레이아웃

Question

d3.layout.force을 사용하여 강제로 그래프를 만들려고합니다. 크기를 조정하려면 컨테이너가 필요합니다. 즉, 적절한 충전 및 linkDistance 값을 기반으로 계산할 수 있어야합니다. 크기, 또는 d3 마법의 방법으로 나를 위해 그것을해라.

노드를 사용하는 시도 (링크 : http://jsfiddle.net/VHdUe/6/)를 만들었습니다. 나는 원 모양의 경향이있는 원의 반지름에 맞는 노드의 수를 기준으로 값을 설정합니다.

이 솔루션은 일부 중간 크기의 용기 작동하지만 몇 번 크기를 조정 클릭하면, 당신은 정말 모든 규모 작동하지 않습니다 볼 수 있습니다 ...

(가) 유일한 방법은 앞으로 내가 볼 수 있습니다 내 요소의 크기를 엉망으로 만드는 svg 스케일 변환을 사용합니다. 다른 옵션은 없습니까?

추신 : 나는 http://mbostock.github.com/d3/talk/20110921/bounding.html (대답은 D3 force directed layout with bounding box에 대한 답)을 보았으나, 경계 상자보다 중력 기반 솔루션을 가지고 있다고 생각합니다.

Answer 1

charge 및 linkDistance 외에도 gravity도 있습니다. 그래프가 레이아웃 크기와 동일한 상대 밀도를 유지하게하려면 충전량과 중력 값을 모두 조정해야합니다. 이것들은 블롭의 전체 크기를 결정하는 주요한 두 컴퓨팅 요소입니다. 자세한 내용은 my force layout talk을 참조하십시오.

나는 몇 가지 다른 버전을 시도하고,이 사람은 꽤 잘 작동하는 것 같았다 : 레이아웃의 영역으로 나눈 노드의 영역 :

여기

var k = Math.sqrt(nodes.length/(width * height)); 

layout 
    .charge(-10/k) 
    .gravity(100 * k) 

nodes.length/(width * height) 그래프 밀도에 선형 적으로 비례한다. 책임 힘은 inverse-square law을 따른다, 그래서 제곱근이 왜 잘 작동하는지 설명 할 수있다. D3의 "중력"은 레이아웃 센터에서 거리에 따라 선형으로 확장되는 가상 스프링이기 때문에 그래프가 더 밀도가 높아져 노드가 경계 상자를 벗어나는 것을 방지하여 중력을 증가시킵니다.