d3.js : 직교 회전 최적화

직교 투영을 사용하여지도를 만들었으며 회전이 원활하지 않아 성능이 향상되었습니다 (약 6-7FPS).d3.js : 직교 회전 최적화

topojson 파일 (world-100m)로 제작 된 세계지도입니다. 나는 국가와 상호 작용하고 그들을 색칠해야합니다. 많은 svg : 경로가 있습니다. 국가는입니다. 나는 자동 회전 기능이 로딩 후

이 d3.timer를 사용하여 시작 : 너무 느린 이유

autoRotate =() => 
    @start_time = Date.now()  # Store the current time (used by automatic rotation) 

    d3.timer() => 
    dt = Date.now() - @start_time 

    if @stopRotation or dt > @config.autoRotationDuration 
     true 
    else 
     @currentRotation[0] = @currentRotation[0] - @config.autoRotationSpeed 
     @projection.rotate @currentRotation 
     redrawPathsOnRotationOrScale(@currentRotation, @projection.scale()) 
     false 

redrawPathsOnRotationOrScale = (rotation, scale, duration = 1) => 
    @currentRotation = rotation 

    @projection 
    .rotate(@currentRotation) 
    .scale(scale) 

    @groupPaths.selectAll("path") 
    .attr("d", path)

이해하기 위해, 나는 크롬에서 프로파일 레코드를 만들어 여기에 결과 :

Chrome profiling 1/2 Chrome profiling 2/2

애니메이션 프레임이가 느린 부분이다하지만 난 정말 그게 뭔지 모르겠어요 해고 보인다. 그리고 그것을 열면 GC 이벤트 2 개 (가비지 컬렉터)가 있지만 주변에는 아무것도 없습니다 ...이 90ms 동안 무슨 일이 일어나고 있는지 알고 계십니까? 성능을 향상시키기

모든 팁은

미리 감사에 의해 환영 :-) 이상입니다! 그런데

, 그것은 다음과 같습니다 Map overview

출처

2013-07-10 John Smith

--simplify-proportion, -s 또는 --quantization topojson 플래그를 조정하여 SVG 경로의 복잡성을 줄이십시오. 브라우저는 여전히 SVG 렌더링 성능이 매우 좋지 않으며 맵을 사용하면 점의 수와 정밀도를 줄이는 데 실제로 도움이됩니다.

출처

2013-07-10 12:02:57

topojson 파일을 생성하는 동안 --simplify-proportion 0.6을 추가하면 많은 세부 사항을 잃지 않고 11 ~ 20FPS의 성능을 향상 시켰습니다. –

D3.js는 타이머를 수행 할 Request Animation Frames을 사용합니다.

From D3 documentation

: 브라우저가 지원하는 경우

는

, 타이머 큐는 유체 및 효율적인 애니메이션 requestAnimationFrame을 사용합니다.

저는 현대적인 브라우저에서 애니메이션을 실행하는 것이 가장 좋은 방법이며,이 부분을 직접 최적화 할 수 있다고는 생각하지 않습니다. 그렇지 않으면 아마도 변수로 캐시 될 수있는 스택 사용 selection_each을 호출하는 것 같습니다.

출처

2013-07-10 08:18:12 Pirhoo

예, * Animation Frames * 요청을 알았지 만 가능한 한 가장 빠를 것으로 기대합니다. * Request Animation Frames *에 대한 나의 이해는 쓸모없는 계산을 피하기 위해 브라우저가 다시 그리기를 할 수있는 루프가 더 자주 반복되는 것을 피하면서 애니메이션을 느리게 만들지 않아야한다는 것입니다. 'selection_each'에 대해서는, 당신은 절대적으로 옳습니다. 나는이 결과를 캐싱 할 것입니다. 감사 ! –

d3.js : 직교 회전 최적화

답변

관련 문제