Angular nvd3 Автоматическая корректировка линейной диаграммы

Я использую директивы angular nvd3.

в соответствии с примером: 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.
-->

Хорошо, если я изменил размер Div на графике. он изменяет размер, но только когда я перемещаю/открываю/закрываю "консольный вид" (ctrl + shift + i в FF).

Я проверяю angular -nvd3-директиву. Нет никакого вызова события для изменения размера, поэтому я предполагаю, что это d3/nvd3 comportement?

Мой вопрос до сих пор: как имитировать этот тип события для изменения размера графика?

Ответ 1

Вы можете попробовать запустить другое событие изменения размера, которое могло бы перерисовать график. window.dispatchEvent(new Event('resize'));

Аналогичный подход работал у меня с Chart.js. Это странно, когда видимая консоль меняет страницу - все еще не совсем понятно, как это работает, но она регулярно появляется с динамическими макетами.

Ответ 2

Я не уверен, что это поможет вам или нет, но я думаю, вы можете обновить график, пока ваш размер div изменится в моем случае: -

Например: -

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

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

});

Ответ 3

Вы можете добавить обработчик события jquery resize, если вы не используете jquery, тогда вы можете присоединить обработчик событий, используя только angular.

Использование jQuery

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

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

});