我目前正在嘗試使用 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>uj5u.com熱心網友回復：
之所以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")
});
}
})<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>在您的代碼中，我還更改了edge. 它表明您需要查看變數和參考之間的區別。
與let edge = { source: {url:response.data[1].id}, target: {url:response.data[2].id} }，如果node1更改，edge.source則不會。所以edge.source會不知道指向哪里。使用let edge = { source: node1, target: node2 }，代碼不僅更短，而且如果node1更改，edge.source則始終是最新的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/382616.html
標籤：javascript Vue.js d3.js 公理