我目前正在嘗試使用 Restful-Api 呼叫並使用資訊來進行 d3.js 強制模擬。問題是，如果我使用 API 中的數據，如果沒有任何數據，則呼叫模擬處理它。如果我等待下一個刻度 this.$nextTick(simu) 所有位置最終都會成為 NaN。這種行為有原因嗎？
const URL = 'https://jsonplaceholder.typicode.com/posts';
new Vue({
el: '#app',
data() {
return {
webGraph: {
nodes: [],
edges: []
},
graph1: {
nodes:[
{url:2},
{url:3},
],
edges:[
{source:2, target:3},
]
}
}
},
created() {
axios.get(URL).then((response) => {
let node1 = {
url: response.data[1].id
}
let node2 = {
url: response.data[2].id
}
let edge = {
source: {url:response.data[1].id},
target: {url:response.data[2].id}
}
this.webGraph.nodes.push(node1)
this.webGraph.nodes.push(node2)
this.webGraph.edges.push(edge)
})
d3.forceSimulation(this.webGraph.nodes)
.force("charge", d3.forceManyBody().strength(-25))
.force("link", d3.forceLink().id(d => d.url).links(this.webGraph.edges))
.on('end', function() {
console.log("done")
});
d3.forceSimulation(this.graph1.nodes)
.force("charge", d3.forceManyBody().strength(-25))
.force("link", d3.forceLink().id(d => d.url).links(this.graph1.edges))
.on('end', function() {
console.log("done")
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h6>{{webGraph}}</h6>
<br>
<h6>{{graph1}}</h6>
</div>
webGraph和graphData1之所以有不同的結果，是因為webGraph的模擬是在沒有資料之前就開始的。如果您將simulation程式碼移到axios.get().then內部，那麼您將看到它按您的預期工作。const URL = 'https://jsonplaceholder.typicode.com/posts'; new Vue({ el: '#app', data() { return { webGraph: { nodes: [], edges: [] }, graph1: { nodes:[ {url:2}, {url:3}, ], edges:[ {source:2, target:3}, ] } } }, created() { axios.get(URL).then((response) => { let node1 = { url: response.data[1].id } let node2 = { url: response.data[2].id } let edge = { source: node1, target: node2 } this.webGraph = { nodes: [node1, node2], edges: [edge] }; d3.forceSimulation(this.webGraph.nodes) .force("charge", d3.forceManyBody().strength(-25)) .force("link", d3.forceLink().id(d => d.url).links(this.webGraph.edges)) .on('end', function() { console.log("done") }); }) d3.forceSimulation(this.graph1.nodes) .force("charge", d3.forceManyBody().strength(-25)) .force("link", d3.forceLink().id(d => d.url).links(this.graph1.edges)) .on('end', function() { console.log("done") }); } })