显示时 nvd3 图表错误：无答案

【问题标题】：nvd3 chart error when display:none显示时 nvd3 图表错误：无
【发布时间】：2013-07-11 07:31:15
【问题描述】：

我目前在我的应用程序中使用 nvd3 来绘制图表。我有一个问题，如果在渲染图表之前通过display:none 隐藏了 div，图表会抛出错误，并且在“取消隐藏”div 时，我必须单击图表以让它们呈现正确。即使 div 被隐藏，是否有任何方法可以预渲染图表？我曾尝试在调用图表之前设置父 svg 的宽度和高度，但无济于事。

nv.addGraph(function () {
    //chart setup code

    d3.select("#chart svg").attr("width", 300).attr("height", 500);
    d3.select("#chart svg").datum(data).transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);
    return chart;
});

【问题讨论】：

标签： d3.js nvd3.js

【解决方案1】：

我想出了如何使以前隐藏的图表正确呈现而无需静态定义图表区域的尺寸：

NVD3 Charts not rendering correctly in hidden tab

此解决方案还依赖于使用 JS 显示隐藏内容，同时触发调整大小事件，该事件强制 NVD3 调整现在可见图表的大小以填充父级。就我而言，我并不关心 SEO，所以我使用了 display:none;但可见性：隐藏；也可以。

【讨论】：

【解决方案2】：

只需添加此 JavaScript：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  window.dispatchEvent(new Event('resize'));
})

hidden.bs.tab 是根据 Bootstrap 文档显示新选项卡后触发的事件。此代码在每次选项卡更改后触发调整大小事件。

【讨论】：

【解决方案3】：

您可以使用这样的类隐藏图表 - 但仍呈现图表：

.out-of-sight-and-space{
  visibility: hidden !important;
  position: absolute !important;
  top: 0 !important;
}

您应该将此应用于 svg 的父级，在您的情况下为 #chart。当您要显示图表时，请删除该类。

【讨论】：

这缺少上下文。比如这个类应该应用到什么元素上？
同样不行，我在 SVG 和父容器上都试过了。
您建议的修复不会导致图表正确呈现。确实，尽管它呈现为不可读的重叠混乱，但除非您明确定义隐藏父 div 的尺寸，否则它不会以有用的方式预呈现。更重要的是，如果您确实定义了维度，该图表将不再响应。