4

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

3 回答 3

2

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

NVD3 图表未在隐藏选项卡中正确呈现

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

于 2014-02-05T16:16:45.123 回答
0

只需添加此 JavaScript：

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

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

于 2015-04-02T05:10:55.530 回答
-1

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

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

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

于 2013-12-05T13:22:21.557 回答