2

私はd3.jsでグラフを作成しており、更新ごとに2行と一緒にほぼ30〜60の円を追加しています。これがブラウザで遅くなり、重大なパフォーマンスの問題を引き起こしていることがわかりました。

円を描く代わりに、CSS 内で html を追加して画像を使用するほうがよいでしょうか?

また、どうすればこれを行うことができますか？

4

1 に答える 1

4

ここに、純粋な HTML で D3.js を使用する例をいくつか示します。

コードからわかるように、これを行うには…実行するだけです。必要な HTML 要素を名前で作成し、属性または CSS プロパティを設定します。

たとえば、円の画像を作成するには、次のようにします。

var imgs = d3.select("body").selectAll("img").data(myData);
imgs.enter().append("img").attr("src", "circle.png");
imgs.exit().remove();

これが SVG よりも速いかどうかについては、おそらく少しは速くなりますが、それほどではありません。お使いのコンピュータ/ブラウザが遅いか、コードで何か間違ったことをしている可能性があります (たとえば、特定の要素を誤って破棄して再作成するなど) 。ただし、あなたの問題の例を見ることなく、私たちは推測することしかできません.

于 2012-06-20T04:29:42.477 に答える