Cómo acelerar la animation de layout de fuerza en d3.js

Estoy usando D3.js para representar aproximadamente 500 nodos y enlaces entre ellos. Por lo general, necesita 10 segundos para que el layout se estabilice (la iteración converja).

¿Cómo puedo acelerar todo el process, por ejemplo, los nodos se mueven 2 veces más rápido durante la animation? entonces el time será del 50% (el time de CPU que se utilizó para la iteración debería ser mucho menor que 10 segundos, pero ¿cómo puedo networkingucir el time de animation?).

Yo he tratado:

  1. Administre manualmente el tick () en un ciclo for con ciertos times, por ejemplo, 100 veces, es más rápido, pero la animation estará oculta para el usuario, lo cual es una gran pérdida.
  2. Aumentar la fuerza del enlace será útil, los nodos se moverán mucho más rápido durante la animation. Pero el layout es muy sensible, cualquier pequeño arrastre puede provocar que muchos nodos se muevan.

¿Alguna sugerencia? Gracias.

Mira este hilo que tiene mucha información buena relacionada con este tema.

Una sugerencia de ese hilo que puede intentar implementar es llamar a force.tick() varias veces dentro de una única requestAnimationFrame llamada requestAnimationFrame , luego actualizar las posiciones de nodo y enlace, y luego force.alpha hasta que force.alpha llegue a 0 (o lo que sea que desee su umbral alfa a ser). Pruebe algo como esto:

 var ticksPerRender = 3; requestAnimationFrame(function render() { for (var i = 0; i < ticksPerRender; i++) { force.tick(); } // UPDATE NODE AND LINK POSITIONS HERE if (force.alpha() > 0) { requestAnimationFrame(render); } }); 

Eso rendiría una vez por cada 3 tics, o 3x de velocidad. Ajuste el valor de ticksPerRender según sea necesario.

AQUÍ hay una demostración simple. En este caso, he usado el force.on('start', callback) para llamar a la lógica de representación descrita anteriormente. Esto significa que se volverá a llamar automáticamente cuando se inicie una interacción de arrastre.