Bootstrap Modal-Dialog 与 D3 图答案

【问题标题】：Bootstrap Modal-Dialog with D3 diagramBootstrap Modal-Dialog 与 D3 图
【发布时间】：2016-02-18 08:08:16
【问题描述】：

第一：

我对带有图表的动态模式对话框有疑问。代码很简单：

https://jsfiddle.net/c2abnhja/1/

如您所见，创建的 div 容器中没有图表。但是，如果您调整窗口大小，则使用正确大小的模态对话框正确绘制图表。 [我手动触发resize事件也没关系：https://jsfiddle.net/ywaoec3d/1/]

第二个：

如果我为引导程序的模态对话框设置大小，如下所示： https://jsfiddle.net/aqs5fhha/1/ 该图永远不会得到模态内容的正确高度......但是 c3.js 的文档说：

size.height

The desired height of the chart element.

If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.

知道为什么图表没有正确绘制吗？

提前致谢

【问题讨论】：

标签： javascript jquery twitter-bootstrap d3.js c3.js

【解决方案1】：

我能够使用这个解决您的问题：

$('#myModal').on('shown.bs.modal', function() {
    var chart = c3.generate({
        bindto: '#diagramAppend',
        data: {
            x: 'x',
            columns: [
                ['x', 30, 50, 100, 230, 300, 310],
                ['data1', 30, 200, 100, 400, 150, 250],
                ['data2', 130, 300, 200, 300, 250, 450]
            ]
        }
    });
});

基本上发生的事情是您尝试在div 上生成图表，其中0 width。等待事件shown.bs.modal 让您此时拥有width。

更新JSFiddle

【讨论】：