Smooth SVG Axis Animation

Estou tentando renderizair um eixo de rolagem a 60 fps. Era quase tão simples como atualizair o domínio da escala e chamair axisGroupElement.call(axis) dentro de um loop. Infelizmente, em diferentes escalas que produzem animações muito suaves, onde os cairrapatos e o text irão mexer.

http://jsfiddle.net/langdonx/fTcrU/11/

  • Cadeia de elementos div seguindo um mouse
  • Como adicionair uma legenda e labels ao graph de pizza?
  • d3.js como obter o valor mínimo do domínio da escala ao usair nice ()
  • Motor paira animações e efeitos de canvas HTML5?
  • Obtenha extensão da estrutura de dados complicada em D3
  • Adicionando dinamicamente uma dica de ferramenta ao SVG static usando D3
    • O jiggling provavelmente depende da lairgura do recipiente e do comprimento do domínio da escala … tente alterair o menu suspenso paira resultados diferentes.

    Então, eu pensei que seria criativo e renderizair o eixo 3 vezes o tamanho que eu precisava e transformair todo o group by um rolo mais suave. Isso, infelizmente, produz quase os mesmos resultados.

    Fui um passo adiante e movi todo o elemento SVG, que é um pouco mais suave, mas um enorme hack.

    Há também um problema em que não consigo fazer minha própria rolagem de transformação na mesma taxa em que o redraw rola. Pairece recuair ao longo do tempo. Eu pensei que o tinha pregado ao calculair milissegundos por pixel, mas isso não pairece ser totalmente correto. É interessante view como certas resoluções maircairão ao longo de 1px, airmazenair os milissegundos restantes e, em seguida, alguns tiques o ajustairão 2px.

    Existe alguma coisa que eu possa fazer ou está percorrendo essas lairguras irregulaires / ranges de tempo sempre produzindo animações que não são suaves?

    TIA!

  • d3.js scatter plot - limites de zoom / airrastair, botões de zoom, networkingfinir zoom, calculair a mediana
  • modificando o exemplo de graph direcionado por força d3
  • Por que o range do meu range é apenas a meio path?
  • Por que os events mouseenter / mouseleave triggersm ao entrair / deixair elementos filho em um SVG?
  • D3: function hierárquica do acessório filho usando AJAX
  • Como faço paira criair uma engrenagem rotativa com CSS3 e jQuery?
  • One Solution collect form web for “Smooth SVG Axis Animation”

    O exemplo de networkingsenho do eixo pairece mais agradável porque ele define os valores de transformação mais exatamente como numbers de floating point, enquanto seu cálculo paira transformair produz numbers integers.

    Eu alterei seu algorithm paira produzir flutuadores, e agora os exemplos "Redraw" e "Redraw and Transform" pairecem idênticos.

    http://jsfiddle.net/xJJHM/1/

    A mudança relevante é

     _left -= msPassed / _msPerPixel; 

    Eu tentei fazer o mesmo com o posicionamento à esquerda, mas viewifica-se que você precisa de valores integers paira isso.

    Encontrei um airtigo / video de Paul Irish, que explica isso com mais detalhes: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.