Currently, I am attempting to retrieve data from a Restful API call and utilize it to create a d3.js force simulation. However, I have encountered an issue where if I use the data from the API call directly, the simulation treats it as if there is no data present. When I attempt to wait for the next tick using this.$nextTick(simu), all positions end up being represented as NaN. Is there a specific reason for this unexpected behavior?
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>