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

Question

我正在 d3.js 中构建一个图表，并在每次刷新时附加近 30-60 个圆圈以及 2 条线。我发现这在浏览器中变慢了，导致严重的性能问题。

在我的css中附加html并使用图像而不是绘制圆圈会更好吗？

另外，我该怎么做呢？

Answer 1

我在这里有几个使用纯 HTML 的 D3.js 示例：

• 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 快……可能会快一点，但不会快很多。我怀疑您的计算机/浏览器速度很慢，或者您的代码可能做错了什么（例如意外破坏和重新创建某些元素）。但是，如果没有看到您的问题的示例，我们只能猜测。