nvd3 图表开始在浏览器中被压扁答案

【问题标题】：nvd3 chart starts out squished in browsernvd3 图表开始在浏览器中被压扁
【发布时间】：2016-07-05 08:44:41
【问题描述】：

我已经在互联网上搜索了解决此问题的方法，但还没有遇到。我希望这里有人有这方面的经验，可以帮助我指明正确的方向。

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

这里有一些之前和之后的图片来帮助可视化问题：

之前：

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

编辑：我应该补充一点，设置固定宽度可以规避问题，但随后固有的响应能力就会消失（在较小的浏览器尺寸下图形重叠时会出现新问题）

编辑：添加了一些我希望可以提供帮助的代码 sn-ps。我正在使用 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>

$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; }
    }
};

【问题讨论】：

你可以触发window resize event。我相信nvd3 只是在监听那个事件。
仍然遇到同样的问题。我尝试在图表选项回调和加载页面的函数中触发调整大小事件。这实际上会导致图表在我每次加载页面时再次缩小，而不是之前在第一次浏览器重新调整大小后它会修复，即使我导航回页面。
你能设置一个最小的代码示例来演示你的问题吗？
请使用代码 sn-ps 查看更新的问题
演示您的问题的最小代码示例——这 8 行 HTML 和 14 行 JS 是否重现了您的问题？我什至超越了here，但我无法重现你所看到的......

标签： angularjs twitter-bootstrap d3.js nvd3.js angular-nvd3

【解决方案1】：

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

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

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

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

【讨论】：

还注意到，核心问题源于使用ng-cloak

【解决方案2】：

如果有人遇到这个问题，对我来说这实际上是一个非常简单的解决方案没有调整大小事件。

这是我的图表。

<div id="chart" class="row">
  <div class="col-xs-12">
    <svg>
    </svg>
  </div>
</div>

如果我没有要显示的数据，我只需使用 JavaScript 隐藏 div：

function ShowChart(show) {
  $('#chart').css("display", (show ? "block" : "none"));
}

但是当我将“true”传递给函数时，它被压扁了。

我的解决方案是我必须首先显示 div，然后使用 .update() 来绘制图表。

所以，对我来说，这没有工作：

d3.select("#chart svg").datum(chart_data); 
chart.update();
ShowChart(true);

而这做到了：

ShowChart(true);
d3.select("#chart svg").datum(chart_data); 
chart.update()

【讨论】：