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

【问题标题】：Using HTML instead of SVG within d3.js在 d3.js 中使用 HTML 而不是 SVG
【发布时间】：2012-06-20 02:18:38
【问题描述】：

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

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

另外，我该怎么做呢？

【问题讨论】：

【解决方案1】：

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

【讨论】：

SVG 通常比 HTML 更快，因为 SVG 中的所有内容都是绝对定位的。（例如，SVG 有一个更简单的渲染模型，流布局计算很少。）性能肯定会因不清理旧元素或对元素进行不必要的修改而受到影响。 Canvas 是另一种选择，但它通常比 SVG 更难实现。
@mbostock 有趣；您的经验/测试是否包括绝对定位的 HTML？