I am encountering an issue with my AngularJS web app where multiple D3 line graphs are constantly redrawing, even when the underlying data remains unchanged. I am looking for a way to prevent or minimize these unnecessary redraw events.
What is perplexing is that the redrawing does not occur randomly but seems to be triggered whenever there is a change elsewhere on the page that is unrelated to the graph data. It appears as though the graphs refresh every time the DOM is altered.
** Update (Including Code Snippets) **
'use strict';
angular.module('alarmAggregator.controllers').controller('HomeCtrl', [
'$scope',
'$routeParams',
'$log',
'Source',
'SaveParameters',
'GetParameters',
'IncidentSearch',
'Waveforms',
'ConfigItems',
'usSpinnerService',
'ImageHelper',
'$http',
'$timeout',
function ($scope, $routeParams, $log, source, saveParameters, getParameters, incidentsSearch, waveforms, configItems, usSpinnerService, imageHelper, $http, $timeout) {
searchService.search($scope.parameters).then(function (result) {
$scope.incidentsList = result.data;
}).finally(function () {
$timeout(function () {
$scope.triggerResizeEvent();
usSpinnerService.stop('search_spinner');
}, 1);
});<div ng-repeat="inci in incidentsList track by inci.incidentId">
<div ng-repeat="dist in inci.disturbances track by dist.uniqueId">
<div data-ac-chart="'waveform'" data-ac-data="dist.waveforms"></div>
</div>
</div>