angularjs – nvd3图表开始在浏览器中压扁

我已经在互联网上搜索了这个问题的解决方案,但还没有遇到过.我希望这里有人有这方面的经验,可以帮助我指出正确的方向.

我有一个用Angular-nvd3创建的折线图,我正在使用Bootstrap来提供响应.基本上我每行有两个图表.我遇到的问题是,当我第一次加载页面时,图表会被压缩成一个小宽度.我没有在图表上设置宽度,以便它可以继承100％的宽度并填充容器.只要我对浏览器执行任何操作,例如打开控制台或调整浏览器大小,图表就会缩放到正确的宽度.我想知道是否有办法强制调整大小.在使用c3d3之前我遇到了类似的问题,但是使用chart.resize()解决了这个问题.我不知道nvd3是否有类似的方法,因为我对nvd3没有那么多的经验.我想知道是否有类似的方法我可以使用,或者是否有一种纯粹的方法与d3这样做.

以下是一些前后图片,以帮助可视化问题：

之前：

打开控制台或以任何方式调整浏览器大小后,它可以正确缩放：

编辑：我应该补充一点,设置一个固定的宽度可以避开问题但是固有的响应性会消失(在较小的浏览器大小下图形重叠会出现新的问题)

编辑：添加了一些我希望可以帮助的代码片段.我正在使用Bootstrap方式的行和列.我也在JS中声明了图表选项

HTML

<div class="row">
    <div class="col-sm-6">
        <nvd3 id="inlet" options="inletoptions" data="inletData"></nvd3>
    </div>
    <div class="col-sm-6">
        <nvd3 id="outlet" options="outletoptions" data="outletData"></nvd3>
    </div>
</div>

JS

$scope.inletoptions = {
    chart: {
        type: 'lineChart',height: 300,margin : {
            top: 20,right: 20,bottom: 40,left: 55
        },x: function(d) { return d.x; },y: function(d) { return d.y; }
    }
};

解决方法

对于遇到类似问题的人,请参阅以下帖子：

https://github.com/krispo/angular-nvd3/issues/259

http://plnkr.co/edit/ncT72d?p=preview

$scope.triggerResizeEvent = function() {
    window.dispatchEvent(new Event('resize'));
}