使用響應式設計時，一個視圖上的多個D3js圖形會導致性能問題

Question

我在一個視圖上有大約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");

問題是我多次調用一個指令，而在每個指令中我都調用上面的代碼。 它將對1或2個圖很好地執行，但是您擁有的圖越多，.trigger（“ resize”）就會引起更多的性能問題，因為由於$（window）的多個實例，必須重新渲染越來越多的圖.on（“ resize” ...已創建。

我被迫觸發調整大小，因為直到呈現整個視圖時才設置容器的寬度。

Answer 1

我有一個類似的問題。 當將表單與其他三十個子表單（由各種條件選擇）組合在一起時，我的代碼開始運行非常緩慢。 它沒有幫助nh-show / ng-hide。 我很困惑。 指令ng-if解決了我的問題。

您應該創建如下結構：

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

不是這個：

<div>....</div>
<div>....</div>
<div>....</div>