ngClick D3 grafiğinin yeniden çizilmesine neden olur

Question

Noktalardan birine tıkladığımda grafiğin güncellenmesine neden olur. Bu yalnızca, <nvd3> öğesinde bir ngClick yönergesine sahip olsaydım (dinleyici işlevi hiçbir şey yapmasa bile) olur. ngClick'u kaldırırsam her şey yolunda.

angular-nvd3 ile oldukça basit bir nvd3 dağılım grafiğini kullanıyorum.

Bu garip etkileşime ne neden olabilir? İşte

sorunu yeniden üreten bir plunker var

(görmek zor ama grafik her bir tıklama yeniden çizilir, üst dahil olmak üzere bu yüzden bu kaydın görüntüyü, düşük):

http://plnkr.co/edit/F0ZslBaisoHWIp0VcI8o

teşekkürler!

UPDATE Angular-nvd3 içinde bir saatin içine daraltdım. Bir şekilde ngClick'in varlığı 'verilerin' değişmesine neden oluyor. Bu satır yenilemeyi tetikliyor: https://github.com/krispo/angular-nvd3/blob/master/dist/angular-nvd3.js#L328 Kodumda 'verileri' değiştiren hiçbir şey yok (ayrıca nesnenin yönerge dışında aynı örnek olduğunu doğruladı) ve angular-nvd3.js'de görebileceğim hiçbir şey yok. veri hiç ... hmmm ...

GÜNCELLEME İşte benim click olayı dinleyicisi (boş oluyor) var:

controller.handleChartClick = function(event) { 
}; 

ve html:

<div class="col-sm-10"> 
    <nvd3 ng-click="observationsCharts.handleChartClick($event)" 
       options="observationsCharts.scatterPlotChartOptions" 
       data="observationsCharts.scatterPlotChartData"></nvd3> 
</div> 

Answer 1

Aşağıdaki izle soruna neden olduğunu doğru: Eğer eski ve yeni veri, veri aslında değişiyor ne olduğunu görmek için bu işlevde bir günlük eklerseniz

// Watching on data changing 
scope.$watch('data', function (newData, oldData) { 
    if (newData !== oldData && scope.chart) { 

    if (!scope._config.disabled && scope._config.autorefresh) { 
     scope._config.refreshDataOnly && scope.chart.update ? scope.chart.update() : scope.api.refresh(); // if wanted to refresh data only, use chart.update method, otherwise use full refresh. 
          } 
         } 
        }, scope._config.deepWatchData); 

şey vardır.

Noktalardan birine tıkladığınızda, nvd3 verilere bir renk özelliği ekliyor.

eski veriler:

[{"key":"Battery Voltage","values":[{"x":1439419440000,"y":90,"series":0},{"x":1439419440000,"y":43,"series":0},{"x":1439419440000,"y":345,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0},{"x":1440010740000,"y":32,"series":0},{"x":1439419440000,"y":62,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0}]}] 

yeni veriler:

[{"key":"Battery Voltage","values":[{"x":1439419440000,"y":90,"series":0,"color":"#1f77b4"},{"x":1439419440000,"y":43,"series":0,"color":"#1f77b4"},{"x":1439419440000,"y":345,"series":0},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0},{"x":1440010740000,"y":32,"series":0},{"x":1439419440000,"y":62,"series":0,"color":"#1f77b4"},{"x":1439167620000,"y":73,"series":0},{"x":1439167620000,"y":42,"series":0},{"x":1439167620000,"y":36,"series":0}],"color":"#1f77b4","value":90}] 

yeni noktayı tıklayın her zaman, renk niteliği nesnesine eklenir, yani saat işlevinin aslında doğru çalışıyor.

Ben https://github.com/krispo/angular-nvd3

bir konu üzerinden açılması tavsiye ediyorum ** Düzenleme - Sadece ng tıklama eklendiğinde gerçekleşmeden nedeni bu saati tetikleyeceğini çalıştırmak için döngüsünü sindirmek Açısal zorlar çünkü netleştirmek için .

Answer 2

Bunun için tek geçici çözüm (şimdilik), deepWatchData: false yapılandırma ayarını kullanmaktır. Bu, saatin çok sık tetiklenmesini engelliyor.

<nvd3 config="{deepWatchData: false}" options="..." data="..."/>