初始调用时未加载GoJS图

Question

我一直试图从一个默认的下拉列表中选择的值加载图形。这是select元素的html。

<select class="custom-select" id="activity">
<option disabled value="">Select an activity</option>
<option selected value="Running">Running</option>
</select>

然后javascript是这样的

function loop() {
setTimeout(function () {
load(activities.value);
loop();
}, 5000);
}

var activities = document.getElementById("activity");
load(activities.value);

我试过这个，图表只是下不加载。但后来我尝试了这个

function loop() {
setTimeout(function () {
load(activities.value);
loop();
}, 5000);
}

var activities = document.getElementById("activity");
load(activities.value);
loop();

function load(activity){
graph= {"class": "go.GraphLinksModel",
"nodeDataArray": [{}],
"linkDataArray": [{}]
}
myDiagram.model = go.Model.fromJson(graph);
}

并且在loop()之前的初始函数调用不会加载图形。但是在5秒后，一旦循环开始，图形加载． 每隔5秒它就会正常加载一次。我还试着在下拉菜单中添加一个onchange事件监听器，并添加了两个选项。

activities.addEventListener("change", () => {
load(activities.value);});

，一旦我来回改变，图形就会加载。

我还在load(activities.value);之后尝试了myDiagram.requestUpdate();。

哪里出了问题?我做错了什么?感谢所有的建议和问题，如果有人能帮助我，当然还有一些答案。

Answer 1

我发现问题的解决方案是加载函数最初在div元素可用之前被调用。添加window.addEventListener('DOMContentLoaded', init);后，现在工作正常。