d3.js: оптимизация орфографического вращения

Question

Я сделал карту с использованием орфографической проекции, и я стараюсь улучшить производительность, потому что вращение не является гладким (около 6-7FPS).

Это карта мира, построенная с файлом 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 и вот результат:

кажется покадровой анимации Уволен это медленная часть, но я не знаю, что это такое. И когда я его открываю, есть 2 GC Event (сборщик мусора?), Но ничего вокруг ... У вас есть идея, что происходит в течение этого 90 мс?

Любые советы по улучшению производительности более чем приветствуется :-)

Спасибо авансом!

Кстати, это выглядит следующим образом:

Answer 1

Попробуйте уменьшить сложность путей SVG, настроив флаги -simplify-ratio, -s или --quantization topojson. Браузеры по-прежнему имеют довольно плохую производительность рендеринга SVG, и с картами он действительно помогает уменьшить количество и точность точек.

Answer 2

D3.js использует Request Animation Frames для выполнения таймеров.

From D3 documentation:

Если ваш браузер поддерживает его, очередь таймер будет использовать requestAnimationFrame для жидкости и эффективной анимации.

Как я знаю, это лучший подход к анимации в современных браузерах, и я не думаю, что вы можете напрямую оптимизировать эту часть. В противном случае кажется, что вы вызываете стек, используя selection_each, который, вероятно, может быть кэширован в переменную.