D3.js 显示时nvd3图表错误：无

我目前正在我的应用程序中使用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;
});

---

您可以使用如下类隐藏图表，但仍可以渲染图形：

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

---

您应该将其应用于svg的父级（在您的示例中为#图表）。要显示图表时，请删除该类。

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

---

此解决方案还依赖于使用JS显示隐藏内容，同时触发一个调整大小事件，强制NVD3调整当前可见图表的大小以填充父级。在我的情况下，我不关心搜索引擎优化，所以我使用显示：无；但是可见性：隐藏的；也可以。只需添加以下JavaScript：

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

---

hidden.bs.tab

是根据引导文档显示新选项卡后激发的事件。此代码在每次更改选项卡后触发调整大小事件。

这缺少上下文。例如，这个类应该应用于哪个元素？它也不起作用，我在SVG和父容器上都尝试了它。您建议的修复不会导致图表正确呈现。确实，它呈现为不可读的重叠混乱，但除非明确定义隐藏父div的维度，否则它不会以有用的方式预呈现。更重要的是，如果您定义了维度，该图表将不再具有响应性。