d3.js - NVD3 图表未在隐藏选项卡中正确呈现

Question

我正在构建一个包含许多图表的页面，这些图表一次显示一个，具体取决于您正在查看的选项卡。

最初事件选项卡中的图表正确呈现。但是，当我单击另一个选项卡时，图表未正确呈现。

大概这是因为隐藏字段在变得可见之前没有维度。事实上，如果我调整窗口大小，图表将更正它的比例，并渲染以填充可用宽度。

我可以通过通过 css 显式定义图表大小来解决这个问题，但这会破坏图表的响应方面。

谁能告诉我如何触发相同的 NVD3 事件，该事件在窗口调整大小时被激活？这样我就可以将它绑定(bind)到新选项卡的选择上，并希望能解决渲染问题。

Answer 1

新答案的原因

Vanilla Javascript 在 2018 年对很多人来说是必要的。因为当今存在的许多框架和 Javascript 库都不能很好地与 jQuery 配合使用。曾几何时，使用 jQuery 解决方案回答所有 Javascript 问题是可以接受的，但它不再可行。

问题

加载 C3.js 或 D3.js 图表时，如果在页面加载期间视口(viewport)不在站点中，则图表无法正确呈现。

示例

如果您输入 URL，然后打开一个新选项卡，然后在页面加载后返回。

如果您刷新包含图表的页面，则最小化浏览器并在页面加载后将其打开。

如果您刷新或转到带有图表的页面，然后滑动到计算机上的新窗口。然后在加载后返回带有图表的页面。

在所有这些情况下，您的 C3.js/D3.js 图形将无法正确呈现。通常你会看到一个空白的 Canvas 。因此，如果您期待一个条形图，您会看到一个没有绘制条形的 Canvas 。

背景

虽然我已经看到这个问题得到了回答，但我需要一个符合 的答案。不是 使用 jQuery。现在我们已经到了 jQuery 无法解决所有问题的时代，我认为为这个问题提供一个普通的 Javascript 答案似乎很合适。

我的团队面临的问题是，如果您刷新页面并滑开或最小化，C3.js/D3.js 图表将无法加载。基本上，如果您没有留在页面上并将其保留在站点中直到加载完成，您将不会看到图表，直到您再次调整页面大小。我知道这是每个使用 C3.js/D3.js 的人都会遇到的问题，但我们专门在 Salesforce 中使用 Lightning。

回答

我们的解决方法是在初始化图表的 Controller 函数中添加它。任何人都可以在他们编写的任何函数中使用它来初始化他们的 C3.js/D3.js 图，而不管他们的堆栈如何。这不依赖于 Salesforce，但如果您在 Salesforce 中遇到此问题，它确实有效。

document.addEventListener('visibilitychange', () => {
   console.log(document.visibilityState);
   window.dispatchEvent(new Event('resize'));
});