유향 그래프에서 링크 애니메이션의 D3 속도 문제

아래 코드를 사용하여 강제 레이아웃 방향 그래프의 링크에 애니메이션을 적용하려고합니다. 링크는 경로가 아닌 단순한 선입니다. 버튼 누르기로 애니메이션을 시작합니다. 스타일 변경 (onTick에서)은 즉시 발생하지만 문제는 애니메이션 자체가 시작하는 데 약 10 초가 걸린다는 점입니다. 내가 뭔가 잘못하고 있는거야? 애니메이션의 시작 속도를 높일 수 있습니까? 일단 애니메이션이 시작되면 애니메이션이 잘 돌아갑니다.유향 그래프에서 링크 애니메이션의 D3 속도 문제

function animLink(d) 
{ 
    this.transition() 
     .delay(0) 
     .duration(10000) 
     .ease("linear") 
     .attrTween("stroke-dashoffset", function() { 
      var i = d3.interpolateString("1000", "0"); 
      return function(t) { return i(t); }; 
     }) 
    .each("end", function() { d3.select(this).call(animLink); }); 
} 

onTick = function(e) 
{ 
    if (buttonPressed) 
     link 
      .style("stroke-dasharray", "10,10") 
      .call(animLink); 
}

여기서 jsfiddle을 볼 수 있습니다. 처음에는 .delay (0)를 지정하더라도 5 초 지연이 있습니다.

피들의 그래프는 내가 가지고있는 2000 노드에 비해 꽤 작습니다.

출처

2014-11-05 gaitat

'.call (animLink)'대신'.each (animLink)'가 필요하다고 생각합니다. –

실제로 그것은 그것을 최악으로 만들었습니다. 모든 노드가 (0,0)에 끝나고 애니메이션이 전혀 시작되지 않았습니다. – gaitat

자, 완벽한 예제를 제공해 주시겠습니까? 'link' 란 무엇이고'onTick'은 어디에서 호출할까요? –

강제 레이아웃의 모든 반복 (예 : tick 이벤트)시 애니메이션을 시작하는 코드를 호출하는 것이 문제입니다. 즉, 새로운 전환이 이전 전환을 취소하기 때문에 실제로 실행할 기회가 없도록 반복해서 설정하고 있습니다.

강제 실행이 완료되어 더 이상 tick 이벤트가 없기 때문에 실제로 실행됩니다. 해결책 : tick 이벤트 처리기 외부에서 코드를 호출하십시오. 데모 here.

출처

2014-11-06 09:24:24

유향 그래프에서 링크 애니메이션의 D3 속도 문제

답변

관련 문제