Poor SVG performance on iPad

Question

I draw 3,000 SVG circles using D3.js. D3.js works fine, but you need to move them with the mouse. Safari works fine on my desktop, but when I do them on the iPad ... well, from 15 FPS go down to 2/1 FPS.

If I just do 500 laps ... steel poor. Is there a way to improve performance?

I move them using this:

var diff = this.lastClientX - getD3MousePosition().X; if(isNumber(diff)){ this.XLines.forEach(function(line){ line.attr("x1",parseFloat(line.attr("x1")) - diff); line.attr("x2",parseFloat(line.attr("x2")) - diff); }) } this.lastClientX = getD3MousePosition().X; 

• Diff is just a variable to get the last mouse move.
• getD3MousePosition () gives you the position of mouseX and mouseY.
• this.Xlines has jQuery links to every SVG circle compiled from D £ .js when it renders them.

Basically, I want to move 3,000 SVG circles in the liquid path on the iPad.

Thanks!

Answer 1

Try CSS3 transforms. Instead of changing the attributes of an SVG position, you can translate points using CSS3 transforms. It will probably be smoother on the iPad.

If this does not work well enough: you can try using HTML5 Canvas instead of SVG for better rendering performance. D3 supports Canvas for rendering.