私はd3.jsでグラフを作成しており、更新ごとに2行と一緒にほぼ30〜60の円を追加しています。これがブラウザで遅くなり、重大なパフォーマンスの問題を引き起こしていることがわかりました。
円を描く代わりに、CSS 内で html を追加して画像を使用するほうがよいでしょうか?
また、どうすればこれを行うことができますか?
私はd3.jsでグラフを作成しており、更新ごとに2行と一緒にほぼ30〜60の円を追加しています。これがブラウザで遅くなり、重大なパフォーマンスの問題を引き起こしていることがわかりました。
円を描く代わりに、CSS 内で html を追加して画像を使用するほうがよいでしょうか?
また、どうすればこれを行うことができますか?
ここに、純粋な 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 よりも速いかどうかについては、おそらく少しは速くなりますが、それほどではありません。お使いのコンピュータ/ブラウザが遅いか、コードで何か間違ったことをしている可能性があります (たとえば、特定の要素を誤って破棄して再作成するなど) 。ただし、あなたの問題の例を見ることなく、私たちは推測することしかできません.