Question

I'm using angular nvd3 directives.

according to the 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.
-->

Well, if I change The Div size of the graph. it resize but only when I move/open/close the 'console view' (ctrl + shift + i on FF).

I check on angular-nvd3-directive, There is no event call for the resize, so I suppose it's a d3/nvd3 comportement?

My question so far: How to simulate this kind of event for the graph to resize?

Answer 1

你可以尝试触发另一个可以重绘图形的resize事件。 window.dispatchEvent(new Event('resize'));

类似的方法适用于Chart.js。当可见的控制台改变页面时，这很奇怪 - 仍然不完全理解它是如何工作的，但它会定期显示动态布局。

Answer 2

我不确定它会对你有所帮助，但我猜你可以更新图表，而你的div调整大小适用于我的情况： -

例如： -

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

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

});

Answer 3

你可以添加一个jquery resize事件处理程序，如果你没有使用jquery，那么你可以只使用angular附加事件处理程序。

使用jQuery

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

仅使用Angular

Here是一个示例，说明如何使用angular附加事件执行文档。

Angular nvd3 Line Chart automatic resizing

3 个答案: