Angolare nvd3 Ridimensionamento automatico del grafico a linee

Question

Uso le direttive angolari nvd3.

secondo l'exemple: https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!-- 
width and height are removed from the directive for automatic resizing. 
--> 

Beh, se cambio La dimensione Div del grafico. ridimensiona ma solo quando sposto/apro/chiudi la 'console view' (ctrl + shift + i su FF).

Controllo su direttiva angolare-nvd3, Non c'è alcuna chiamata di evento per il ridimensionamento, quindi suppongo che sia un complemento d3/nvd3?

La mia domanda fino ad ora: come simulare questo tipo di evento per il grafico da ridimensionare?

Answer 1

Si potrebbe provare a lanciare un altro evento di ridimensionamento che potrebbe ridisegnare il grafico. window.dispatchEvent(new Event('resize'));

Un approccio simile ha funzionato per me con Chart.js. È strano quando la console è visibile cambia la pagina - non capisco ancora come funziona, ma si presenta regolarmente con layout dinamici.

Answer 2

Io non sono sicuro che vi aiuterà o no, ma immagino che è possibile aggiornare il grafico in tutta div ridimensionare funziona nel mio caso: -

Ad esempio: -

$('#my_div').bind('resize', function(){ 

      for (var i = 0; i < nv.graphs.length; i++) { 
       nv.graphs[i].update(); 
      } 

}); 

Answer 3

Puoi aggiungi un gestore di eventi di ridimensionamento jquery, se non stai utilizzando jquery, puoi allegare il gestore di eventi usando solo angolare.

utilizzando jQuery

$(document).on('resize', function() { 
 

 
    for (var i = 0; i < nv.graphs.length; i++) { 
 
    nv.graphs[i].update(); 
 
    } 
 

 
});

Utilizzando angolare Solo

Here è un esempio mostra come allegare evento fare documento utilizzando angolare.