Question

我目前正在使用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;
});

Answer 1

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

NVD3 Charts not rendering correctly in hidden tab

此解决方案还依赖于使用JS显示隐藏内容，同时触发调整大小事件，迫使NVD3调整现在可见图表的大小以填充父级。在我的情况下我不关心SEO所以我用display：none;但能见度：隐藏;也会奏效。

Answer 2

只需添加此JavaScript：

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

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

Answer 3

你可以隐藏一个图表 - 但仍然渲染图形 - 使用这样的类：

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

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

display：none时nvd3图表错误

3 个答案: