Actualmente estoy tratando de consumir una llamada Restful-Api y usar la información para hacer una simulación de fuerza d3.js. El problema es que si uso los datos de una API, llama a la simulación que lo maneja si no hubiera nada. Si espero el próximo tick this.$nextTick(simu) todas las posiciones terminan como NaN . ¿Hay alguna razón para este comportamiento?
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>La razón por la que webGraph y graphData1 tienen resultados diferentes es que la simulación de webGraph se inicia antes de que tenga datos. Si mueve el código de simulation dentro de axios.get().then , verá que funciona como esperaba.
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> En su código, también cambié la inicialización de edge . Mostró que es necesario observar la diferencia entre variables y referencias .
Con let edge = { source: {url:response.data[1].id}, target: {url:response.data[2].id} } , si node1 cambia, edge.source no lo hace. Entonces edge.source no sabrá a dónde apuntar. Con let edge = { source: node1, target: node2 } , el código no solo es más corto, sino que si el node1 cambia, edge.source siempre está actualizado.