Saya sedang cuba menggunakan panggilan Restful-Api dan menggunakan mesej untuk melakukan ejekan paksa d3.js. Masalahnya ialah jika saya menggunakan data dari API, jika tidak ada data maka olok-olok dipanggil untuk mengendalikannya. Jika saya menunggu tanda seterusnya this.$nextTick(simu)
所有位置最终都会成为 NaN
. Adakah terdapat sebab untuk kelakuan ini?
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
di dalam, kemudian anda akan melihat ia berfungsi seperti yang anda jangkakan.