我正在 d3.js 中构建一个图表,并在每次刷新时附加近 30-60 个圆圈和 2 条线。我发现浏览器速度变慢,导致严重的性能问题。
附加 html 并在 css 中使用图像而不是绘制圆圈会更好吗?
另外,我该如何去做呢?
最佳答案
我在这里有一些使用 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 更快……可能快一点,但也快不了多少。我怀疑您的计算机/浏览器速度很慢,或者您可能在代码中做错了什么(例如,意外破坏并重新创建某些元素)。但是,如果没有看到您的问题的示例,我们只能猜测。
关于javascript - 在 d3.js 中使用 HTML 代替 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11111999/