2013-06-18 3 views
9

강제 레이아웃의 초기 애니메이션에 영향을주는 것에 대해 많이 읽었지만 아직 이해하지 못했습니다.d3.js 강제 레이아웃의 초기 애니메이션을 제어합니다.

this example을 효과적으로 (효과적으로) "중지"하는 방법을 알아 냈습니다.

하지만 제 질문은 그것을 제어하는 ​​것이 가능합니까 (예 : "강제 중지"까지 소요되는 시간에 영향을 줍니까?).

알파은 변경할 매개 변수이지만 차이는 없습니다. (음수 값, 0과 양수 값을 눈에 띄지 않는 차이없이 시도했습니다). yrscc 내가 뭘하려고 오전의fiddle : 여기

는 내가 뭘하려고 오전의 jsdiddle입니다.

var force = d3.layout.force() 
    .nodes(d3.values(datax.nodes)) 
    .links(datax.links) 
    .size([xViewPortArea.Width, xViewPortArea.Height]) 
    .linkDistance(xGraphParameters.xLinkDistance) 
    .charge(xGraphParameters.xCharge) 
    .on("tick", tick) 
    .alpha(-5) // HERE 
    .start(); 

내 질문 :

  • 알파 값 실제로 반복 횟수에 영향을 미칠까요? (나는 그것이 의미하는 것이라고 생각했다. * 값이 무의미하고 힘 레이아웃이 실행 중일 때,이 메서드는 다음 틱에서 강제 레이아웃을 중지하고 "끝"을 전달한다 in the documentation
  • 안에이 this posting 함수가 제안되어있다. . 분명히 도움이 될 수 있습니다 @JohnS에 의해하지만 어디 하나를 호출하도록되어 이해하지

추신 :. 또 다른 멋진 옵션이 화면에 이미지가 다음 배경 like here에 최적의 레이아웃을 계산하는 것이다 .하지만 구현을 포기했습니다.

답변

10

강제 레이아웃을 식히는 한 가지 방법은 틱 이벤트를 강제 실행하는 것입니다.

var k = 0; 
while ((force.alpha() > 1e-2) && (k < 150)) { 
    force.tick(), 
    k = k + 1; 
} 

알파 값은 힘의 온도를 측정하고, 낮은 값은 레이아웃이보다 안정하다는 것을 나타냅니다. 틱의 수는 노드 수에 따라 달라질 수 있습니다. 50-200으로 좋은 결과를 얻었습니다. 마찰 계수는 힘을 안정시키는 데 도움이되지만 배치가 덜 적합합니다.

+0

우수. 감사. 방금 파일의 끝에 코드를 복사하고 완벽하게 작동합니다. 추신 : 나는 또한 마찰로 놀았지만 애니메이션은 느려지지만 이상한 네트워크 모양을 만듭니다. – user1043144

+0

이것은 간단 해 질 수 있습니다. while (force.alpha()) {force.tick(); }'또는 while (force.alpha()> 1e-5) {force.tick(); }'레이아웃을 계산하지 말아야 할 수준을 제어하고 싶다면. –

관련 문제