使用响应设计时，一个视图上的多个D3js图会导致性能问题

Multiple D3js graphs on one view cause performance issues when using responsive disign

本文关键字：D3js 问题 性能 视图 一个 响应      更新时间：2023-09-26

我在一个视图上有大约20个图表，在我尝试在响应设计中实现图形之前，一切都很完美。每个图都有一个单独的ID。

我正在使用Angular指令来创建这些图。

这段代码是麻烦制造者：

var the_chart = $("#"+attrs.id+"chart"),
                aspect = the_chart.attr("width") / the_chart.attr("height"),
                container = element.parent();
                $(window).on("resize", function() {
                    var targetWidth = container.width();
                    the_chart.attr("width", targetWidth);           
                    var value = Math.round(targetWidth / aspect);
                    the_chart.attr("height",value);
                }).trigger("resize");

问题是，我调用一个指令x次，在每个指令中我都调用上面的代码。它将对1或2个图形执行良好，但图形越多，性能问题就越多。触发器（"调整大小"）将导致，因为由于创建了多个$（window）.on（"调整尺寸"…）实例，越来越多的图形必须重新渲染。

我被迫触发调整大小，因为在渲染整个视图之前不会设置容器的宽度。

我也遇到了类似的问题。当用其他三十个子表单（根据各种条件选择）组成表单时，我的代码开始运行得很慢。这对nh-show/ng隐藏没有帮助。我很困惑。指令ng是否解决了我的问题。

您应该创建这样的结构：

<div ng-if="...."> ... </div>
<div ng-if="...."> ... </div>
<div ng-if="...."> ... </div>
...

不是这个：

<div>....</div>
<div>....</div>
<div>....</div>
相关文章：