javascript - 在 d3.js 中使用 HTML 代替 SVG

标签 javascript dom svg d3.js

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

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

另外,我该如何去做呢?

最佳答案

我在这里有一些使用 D3.js 和纯 HTML 的示例:

正如您从代码中看到的,您只需……这样做即可做到这一点。按名称创建所需的 HTML 元素,并为其设置属性或 CSS 属性。

例如,要创建圆形图像,您可以执行以下操作:

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

至于这是否会比 SVG 更快……可能快一点,但也快不了多少。我怀疑您的计算机/浏览器速度很慢,或者您可能在代码中做错了什么(例如,意外破坏并重新创建某些元素)。但是,如果没有看到您的问题的示例,我们只能猜测。

关于javascript - 在 d3.js 中使用 HTML 代替 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11111999/

相关文章:

带有美元符号的 Javascript 函数声明

javascript - 防止因电子邮件地址无效而提交表单

javascript - 如何使用 JavaScript 将按钮 append 到列表项?

javascript - SVG 平移和缩放不起作用

javascript - 我如何将 JavaScript confirm 变量传递给 php 变量

javascript - 点击下载 Highcharts

javascript - 有没有办法在 Firefox Addon SDK 中构造 DOM

javascript - 从 HTML 代码创建 JavaScript 对象

javascript - svg 的宽度高度没有改变

javascript - 循环计时器sgv html js css,当变大时,线条与大小不匹配