Javascript 剑道图在页面调整大小之前不会显示

我有一个Html页面，其中有div。从单独的js文件中，我将剑道图绑定到该div。在页面调整大小之前，该图不会显示

Html页面

<div id="center-pane" class="col-sm-10">
                    <div>
                        <div id="d1" style="height: 400px;"></div>
                    </div>
                </div>

jf file

var d2 = $("#d1").kendoDiagram({
               shapes: [
                {
                    id: "1",
                    content: {
                        text: "Monday"
                    }
                },
                {
                    id: "2",
                    content: "Tuesday"
                }
            ],
            connections: [

                {
                    from: "1",
                    to: "2"
                }
            ],
            layout: {
                type: "tree"
            },
}).getKendoDiagram();

jf文件
变量d2=$（“#d1”）。肯多迪亚格拉姆({
形状：[
{
id:“1”，
内容：{
正文：“星期一”
}
},
{
id:“2”，
内容：“星期二”
}
],
连接：[
{
从：“1”，
致：“2”
}
],
布局：{
类型：“树”
},
}).getKendoDiagram（）；

如果一个

不可见，则可能意味着它没有明确定义的高度和宽度。然后在中呈现图表是没有意义的。 为了避免这种情况，我们必须增加高度和宽度

<div id="center-pane" class="col-sm-10">
     <div>
        <div id="d1" style="height: 400px; width : 400px;"></div>
     </div>
</div>

何时绑定图表？它是在

文档.ready（）中还是什么？请看@GaloisGirl，我正在从其他地方调用名为bind（）的函数。