Acabo de terminar una implementación aproximada de un gráfico dirigido por fuerza que emite partículas desde los nodos al hacer clic en un nodo. Sin embargo, el rendimiento es peor de lo que esperaba y como soy nuevo en d3js, me preguntaba si hay una mejor manera de hacerlo.

Estado actual:

Código relevante:

Temporizador para llamar al método ticker, que actualiza las partículas:

 let t3 = d3.timer(this.#particleTicked, 1000);

Método de teletipo:

 #particleTicked = () => { let n = d3.selectAll(".nodes").selectAll("g"); const newPos = []; // retrieve node positions n.each(function (d) { newPos.push({ id: d.id, pos: { x: dx, y: dy } }); }); // update particle positions this.#particles.forEach((p) => { const originPos = newPos.find((d) => d.id === p.originNode.id), targetPos = newPos.find((d) => d.id === p.targetNode.id); p.updatePos( Math.round(originPos.pos.x), Math.round(originPos.pos.y), Math.round(targetPos.pos.x), Math.round(targetPos.pos.y) ); }); // update particles in svg this.#updateParticles(self.svg, self.#particles); };

Método que elimina y agrega todos los elementos SVG de partículas:

 #updateParticles = (svg, particles) => { let g = svg.select(".particles"); if (g.empty()) { g = svg.append("g").attr("class", "particles"); } let p = g .selectAll("circle") .data(particles, (d) => d.originNode.id + d.targetNode.id); p.exit().remove(); return p .enter() .append("circle") .attr("class", "particle") .attr("cx", (d) => d.position.x) .attr("cy", (d) => d.position.y) .attr("r", (d) => d.radius) .attr("fill", function (d) { return "#000"; }); };