在d3.js中使用HTML而不是SVG

Question

我在d3.js中構建了一個圖形，並在每次刷新時附加了近30-60個圓以及2行。我發現這在瀏覽器中變慢了，導致了顯着的性能問題。

在我的css中添加html並使用圖像而不是繪製圓圈會更好嗎？

另外，我該如何去做這件事？

Answer 1

我使用D3.js純HTML這裏的幾個例子：

• http://phrogz.net/js/d3-playground/#StockPrice_HTML
• http://phrogz.net/js/d3-playground/#BoxMullerDistribution_HTML
• http://phrogz.net/js/d3-playground/#MultiBars_HTML

正如你可以從代碼中看到，你做這只是...做到這一點。按名稱創建您想要的HTML元素，並在其上設置屬性或CSS屬性。

例如，要創建一個圓的圖像，你可以這樣做：

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

至於這是否會比SVG快......可能快一點，但不是很大。我懷疑你的電腦/瀏覽器速度很慢，或者你的代碼可能會在你的代碼中發生錯誤（例如意外銷燬和重新創建某些元素）。然而，沒有看到你的問題的例子，我們只能猜測。