Javascript 引导启动前的C3渲染

我使用c3.js、AngularJs和bootstrap来绘制一些图表。设置如下所示：

将变量绑定到

表单以在图表类型之间进行更改

我在触发图表渲染的同一个变量上有一个

$watch

根据变量，我呈现多个图表，不同的类型取决于它的值。我每行有两个图表，每个都在

col-XX-6

中

根据触发渲染的同一个变量，每个图表组都使用

ng show=“myVariable==“typeX”

隐藏/显示

因此，view和c3 render作用于同一个变量

第一次渲染是由watch on

$viewContentLoaded

触发的，一切正常。更改选择选项后，列中的第一个图表将以100%宽度呈现，而不考虑引导模板。我的理论是c3.js在视图启动并设置适当的宽度之前渲染图表“太快”。进一步调查：

• 在渲染器上添加$timeout可以修复此问题，但这是不可接受的解决方案
• 在图表上添加固定宽度是可行的，但这是不可接受的，它需要适应引导
• 到目前为止，唯一的解决方案似乎是监听实际的DOM更改，以查看DOM何时实际可见，然后才开始渲染。但这项技术似乎是非常不受欢迎的

如何以正确的方式解决此问题

编辑1：看起来，即使我渲染了所有图表一次，并且从未刷新它们，它们仍然很少，但在显示时会随机地过大

编辑2： 普朗克：

Plunkr可以工作（…），但基本上，当你从type2切换到type1时，我会遇到这种情况，第一个图形会占据100%的宽度，并把一切都搞糟。我看看能不能在Plunkr找到什么东西让它破了

---

编辑3：好吧，也许毕竟没那么好用。我注意到图表有时不呈现（空白页），它们只有在我检查元素或以某种方式摆弄屏幕后才会出现。似乎这背后也有同样的问题。您应该增加plunker预览以模拟更宽的屏幕。

您提到初始大小有问题，但实际上，当浏览器大小也发生变化时，会出现问题

我们在项目中广泛使用d3.js（而不是c3），我们发现最好的选择是在

窗口发出浏览器大小更改事件时，将
d3
创建的
svg
元素的
viewBox
属性设置为父元素的大小

viewBox
基本上是将
svg
的坐标系转换为它定义的原点和大小。
您提到初始大小有问题，但实际上，当浏览器大小也发生变化时，会出现问题

我们在项目中广泛使用d3.js（而不是c3），我们发现最好的选择是在
窗口发出浏览器大小更改事件时，将
d3
创建的
svg
元素的
viewBox
属性设置为父元素的大小

viewBox
基本上将
svg
的坐标系转换为它定义的原点和大小。
进一步研究表明，只有第一个参数的$timeout将在当前摘要和DOM渲染后执行，但在我的例子中，它似乎是随机行为。有时有效，有时无效。你能加一把小提琴或一把宝物吗。。我看看能不能把它弄坏。可以用你的弹片复制：A。选择类型2。B.调整窗口大小。C.选择类型1。在另一个手动调整窗口大小之前，不会呈现任何内容。进一步的研究表明，只有第一个参数的$timeout将在当前摘要和DOM呈现之后执行，但在我的例子中，它似乎是随机行为。有时有效，有时无效。你能加一把小提琴或一把宝物吗。。我看看能不能把它弄坏。可以用你的弹片复制：A。选择类型2。B.调整窗口大小。C.选择类型1。在另一个手动窗口调整大小之前，不会渲染任何内容。在我的svg元素上没有viewBox，但它有宽度。它似乎是根据窗口的变化来缩放的。您如何实际收听窗口更改事件？使用$watch？实际上，您也可以为父元素绑定调整大小事件。在我的svg元素上看不到viewBox，但它确实有宽度。它似乎是根据窗口的变化来缩放的。您如何实际收听窗口更改事件？使用$watch？实际上，您也可以为父元素绑定调整大小事件。看见