2013-04-25 3 views
2

Michael Bostock의 "분자"예제에 기반하여이 URL에서 사용할 수 있습니다 : http://bl.ocks.org/mbostock/3037015.d3.js - 링크 레이아웃을 강제 레이아웃으로 설정합니다.

몇 가지 값으로 링크의 크기를 설정하려고합니다. 이를 위해 "중력"을 비활성화하고 "청구"에 중요한 음수 값을 넣고 첫 번째 노드를 내 창 중앙에 고정했습니다.

var force = d3.layout.force() 
    .size([width, height]) 
    .charge(-800) 
    .friction(0.45) 
    .linkStrength(1) 
    .gravity(0) 
    .linkDistance(function(d) { 
     return radius(d.target.size * 10); 
    }); 

내 문제는 때로는 링크의 크기가 특히 작은 값으로 정의 링크,의 differents 있습니다 (as you can see on the image below)입니다.

누군가 내 문제에 대한 하나의 좋은 해결책을 알고 있습니까?

당신은 여기 내 코드를 볼 수 있습니다

: http://jsfiddle.net/awPn3/

답변

3

그것은 링크의 길이가 가변 힘 레이아웃의 특징이다 - 점이 노드가 자동으로 배치되어 있다는 것입니다 당신이 필요는 없습니다 그것에 대해 걱정하십시오. 거리가 항상 원하는 것임을 확인하는 수표를 구현할 수는 있지만 이것은 매우 어려울 것입니다.

이미 사용하고있는 linkDistance 함수는 (약하게) 이러한 제약 조건을 적용하는 유일한 방법입니다. 그것이 충분하지 않다면, 그것을 완화하는 쉬운 방법이 없습니다. 당신이 할 수있는 유일한 옵션은 위에서 언급 한 것처럼 시뮬레이션의 각 tick마다 체크를 구현하는 것입니다.

+0

감사합니다. 예를 들어 줄 수 있습니까? – user1528760

+0

나는 그런 예를 알지 못합니다. 이것은 구현하기가 아주 복잡 할 것이며 나는 아무도 그것을 해본 적이 없다고 생각합니다. –

+0

감사합니다. 각 노드에 대한 반발력을 구현하는 방법에 대해 어떻게 생각합니까? – user1528760

0

당신이 사용하는 함수를 수정할 때 이미 도움이 될 것 같아요. 또한 양쪽 개체의 크기도 고려해야합니다. 솔루션을 두 객체 사이의 '가시적 인'거리를 설정하는 방향으로 최적화하십시오. (d.source.size + d.target.size) + desired_distance 줄을 따라

관련 문제