Question

我正在使用D3.js渲染3000个SVG圈子。 D3.js工作得很好，但你需要用鼠标移动它们。在我的Safari桌面上工作得很好，但是，当我在Ipad上渲染它们时......好吧，从15 FPS下降到2/1 FPS。

如果我只渲染500个圆圈......钢铁差。有什么方法可以获得更好的表现吗？

我正在使用它来移动它们：

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只是一个变量，可以让鼠标最后移动。
getD3MousePosition（）为您提供mouseX和mouseY位置。
this.Xlines对每个SVG圈子都有jquery引用，一旦渲染它们就从D£.js中收集。

基本上，我想在Ipad上以流畅的方式移动3000个SVG圈。

谢谢！

Answer 1

尝试CSS3转换。您可以使用CSS3转换来转换点，而不是更改SVG位置属性。这可能会在iPad上更顺畅。

如果这不能很好地运行：您可以尝试使用HTML5 Canvas而不是SVG来获得更好的渲染性能。 D3具有Canvas支持渲染。

Ipad上的SVG性能不佳

1 个答案: