我目前正在尝试使用 Restful-Api 调用并使用信息来进行 d3.js 强制模拟。问题是，如果我使用 API 中的数据，如果没有任何数据，则调用模拟处理它。如果我等待下一个刻度 this.$nextTick(simu) 所有位置最终都会成为 NaN。这种行为有原因吗？
1
601const 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
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") }); } })