Angular nvd3 Liniendiagramm automatische Größenanpassung

Question

Ich verwende eckige nvd3-Direktiven.

nach dem 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. 
--> 

Nun, wenn ich die Div Größe des Diagramms ändern. die Größe ändern, aber nur, wenn ich die 'Konsolenansicht' (ctrl + Verschiebung + i auf FF) bewegen/öffnen/schließen.

ich überprüfen, auf Winkel nvd3-Richtlinie Es gibt kein Ereignis Aufruf für die Größe ändern, so dass ich glaube, es ist ein d3/nvd3 comportement?

Meine Frage so weit: Wie für die grafische Darstellung dieser Art von Ereignis simulieren, um die Größe?

Answer 1

Sie könnten versuchen, eine andere Grßenänderungsereignis Brennen, die die Grafik neu streichen könnte. window.dispatchEvent(new Event('resize'));

Ein ähnlicher Ansatz funktionierte für mich mit Chart.js. Es ist merkwürdig, wenn die Konsole sichtbar ist, ändert sich die Seite - verstehe immer noch nicht ganz, wie das funktioniert, aber es zeigt sich regelmäßig mit dynamischen Layouts.

Answer 2

Ich bin nicht sicher, dass es Ihnen helfen wird, oder nicht, aber ich denke, Sie das Diagramm aktualisieren, während div es in meinem Fall die Größe funktioniert: -

Zum Beispiel: -

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

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

}); 

Answer 3

Sie können Fügen Sie einen jquery-resize-Event-Handler hinzu. Wenn Sie jQuery nicht verwenden, können Sie den Event-Handler nur mit angular anhängen.

Mit jQuery

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

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

 
});

Angular Nur Mit

Here ist ein Beispiel zeigt, wie Ereignisdokument mit eckigen anzuhängen.