D3에서 Force Directed Graph의 바운스 엔트리를 어떻게 제어합니까?

Question

Force Layout을 사용하여 Force Directed Graph를 만들 수있었습니다. 대부분의 기능은 훌륭하지만 큰 문제는 레이아웃을 시작할 때 캔버스 위의 위치에 정착하기 전에 캔버스 경계 안팎으로 페이지 전체에 튀어 오르는 것입니다.

나는 그것을 제어하는 ​​알파를 사용하여 시도했지만 작동하지 않는 것 :

사람이 제대로 그 SVG 캔버스로 강제 레이아웃의 항목을 제어하는 ​​방법을 알고 있나요

// Create a force layout and bind Nodes and Links 
    var force = d3.layout.force() 
     .charge(-1000) 
     .nodes(nodeSet) 
     .links(linkSet) 
     .size([width/8, height/10]) 
     .linkDistance(function(d) { if (width < height) { return width*1/3; } else { return height*1/3 } }) // Controls edge length 
     .on("tick", tick) 
     .alpha(-5) // <---------------- HERE 
     .start(); 

?

나는 그래프가 떠 다니는 것과 천천히 정착하는 데 신경 쓰지 않겠지 만 전체 그래프의 미친 바운스는 전혀 매력이 없습니다. 당신이 제공 할 수있는 어떤 도움 http://bl.ocks.org/Guerino1/2879486enter link description here

감사 :

BTW의 Force Directed Graph 예에서 찾을 수 있습니다!

Answer 1

나는이 문제에 대해서도 생각해 왔으며 이것이 내가 생각해 낸 해결책이다. 노드 레이아웃을 사용하여 강제로 레이아웃 틱을 오프라인으로 실행하고 결과 노드 데이터를 JSON 파일에 저장했습니다. 레이아웃 용 새 json 파일로 사용했습니다. 솔직히 더 잘 작동하는지 잘 모르겠다. 내가 찾은 해결책에 대해 듣고 싶습니다.

Answer 2

노드는 임의의 위치로 초기화됩니다. 설명서에서 "위치를 수동으로 초기화하지 않으면 강제 레이아웃이 무작위로 초기화되어 예측할 수없는 동작이 발생합니다." 소스 코드에서 볼 수 있습니다 :

// initialize node position based on first neighbor 
function position(dimension, size) { 
    ... 
    return Math.random() * size; 

캔버스 경계 내부에 있지만 강제로 외부로 밀 수 있습니다.

1. 노드는 캔버스 내에서 제한 할 수 있습니다 : 당신은 많은 솔루션이 http://bl.ocks.org/mbostock/1129492는
2. 더 충전 강도와 짧은 링크, 이상 마찰을 시도를하기 때문에 노드는
3. 당신은 실행할 수 있습니다 적은 반송하는 경향이 단지 최종 결과를 보여 노드를 애니메이션하지 않고 시뮬레이션 http://bl.ocks.org/mbostock/1667139
4. 당신은 노드 위치 https://github.com/mbostock/d3/wiki/Force-Layout#wiki-nodes를 초기화 할 수 있습니다 (하지만 당신은 중앙에 그들 모두를 배치하면, 반발이 큰 것 그래프는 아직도 폭발) :
를

.

var n = nodes.length; nodes.forEach(function(d, i) { 
    d.x = d.y = width/n * i; });