4

D3.jsを使用して3000個のSVG円をレンダリングしています。D3.jsはうまく機能しますが、マウスを使用して移動する必要があります。私のSafariデスクトップではうまく機能しますが、Ipadでレンダリングすると...まあ、15FPSから2/1FPSに下がります。

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サークルを滑らかな方法で移動したいと思います。

ありがとう！

4

1 に答える 1

0

CSS3 変換を試してください。SVG の位置属性を変更する代わりに、CSS3 変換を使用してポイントを変換できます。これは、iPad でよりスムーズになる可能性があります。

それが十分に機能しない場合: SVG の代わりに HTML5 Canvas を使用してレンダリング パフォーマンスを向上させることができます。D3 にはレンダリング用の Canvas サポートがあります。

于 2013-07-28T21:23:50.717 に答える