Bootstrap 带 D3 图的模态对话框

Question

第一个：

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

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

第二个：

如果我为 bootstrap 的模态对话框设置大小，如下所示： 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.

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

提前致谢

Answer 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]
            ]
        }
    });
});

基本上发生的事情是您尝试在具有 0 width 的 div 上生成图表。等待事件 shown.bs.modal 允许你在这一点上有一个 width。

已更新JSFiddle

Bootstrap 带 D3 图的模态对话框

Bootstrap Modal-Dialog with D3 diagram

javascript

jquery

d3.js

twitter-bootstrap

c3.js