在bootstrap开始之前进行C3渲染

Question

我使用c3.js，AngularJs和bootstrap来渲染一些图表。设置如下：

1. 将变量绑定到<select>表单以更改图表类型

2. 我在同一个变量上有一个$watch来触发图表渲染。

3. 根据变量，我会渲染多个图表，不同的类型取决于它的值。我每行有两个图表，每个图表都在col-XX-6内。
4. 根据触发渲染的同一变量，使用ng-show="myVariable== 'typeX'"隐藏/显示每个图表组。

因此，view和c3 render对同一个变量起作用。

第一次渲染是由$viewContentLoaded上的监视触发的，一切正常。更改选择选项后，列中的第一个图表呈现 100％宽度，忽略引导程序模板。我的理论是c3.js在视图开始并设置适当的宽度之前使图表“太快”。进一步调查：

• 在渲染器上添加$ timeout可以解决问题，但这是不可接受的解决方案
• 在图表上添加固定宽度有效但不可接受，需要适应bootstrap
• 到目前为止，似乎唯一的解决方案是监听实际的DOM更改，以查看DOM何时实际可见，然后才启动渲染。但似乎这种技术非常气馁。

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

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

编辑2： 普兰克：http://plnkr.co/edit/mU5m694VoDB5GtXrmPdP

Plunkr工作（...）但基本上，当你从type2切换到type1时，它会发生在我身上，第一个图形占用100％的宽度并弄乱一切。我会看看我是否能在Plunkr中找到能够让它破裂的东西。

编辑3：嗯，也许不是那么好的工作。我注意到图表有时候不会渲染（空白页面），它们只会在我检查元素或以某种方式摆弄屏幕后出现。好像它背后可能是同样的问题。您应该增加plunker预览以模拟更宽的屏幕。

Answer 1

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

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

viewBox基本上将svg的坐标系转换为由其定义的原点和大小。