You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A common technique used to keep force-directed graphs with collision forces butter-smooth is collision easing:
Slowly ramping up the collide force's strength from an initial 0 to the desired end value by updating it on each tick().
This way the layout has a chance to very quickly settle on a "pretty good yet possibly overlapping" layout before turning up the collide force for nudging the nodes to their final positions, while resolving any remaining overlaps.
By adding tick event like …
typeTickEvent=CustomEvent<{alpha: number;// Any other values worth providing here?}>;
… and a corresponding on:tick to ForceSimulation one would be able to implement collision easing (or any other dynamic simulation fine-tuning for that matter) along these (pseudo-code) lines, by coupling the weighted strength to the simulation's current alpha value (or any other timing value available to the component itself):
<scriptlang="ts">import*asd3from'd3';import{writable,typeWritable}from'svelte/store';constcollideStrengthTarget: number=1.0;letforces: Writable<Record<string,d3.Force<any,any>>>=writable({link: d3.forceLink(links).distance(0).strength(1.0),charge: d3.forceManyBody().strength(-50.0),collide: d3.forceCollide().strength(0.0),x: d3.forceX(),y: d3.forceY()});functionhandleTick(event: TickEvent){constweight=d3.easeQuadInOut(1.0-event.alpha);// I'm assuming here that ForceSimulation's force objects have reference semantics:forces.update((forces)=>forces.collide.strength(weight*collideStrengthTarget));}</script><ForceSimulation{forces}...on:tick={handleTick}><!-- ... --></ForceSimulation>
The text was updated successfully, but these errors were encountered:
This makes sense to me, but I would love to see an example of this in action (or even a PR 😁)
Updating forces should reactively update (see Force Group example which does something similar). I also have a good bit of additional reference examples in issue #139, but I haven't seen this kind of tick/easing.
A common technique used to keep force-directed graphs with collision forces butter-smooth is collision easing:
Slowly ramping up the collide force's strength from an initial 0 to the desired end value by updating it on each
tick()
.This way the layout has a chance to very quickly settle on a "pretty good yet possibly overlapping" layout before turning up the collide force for nudging the nodes to their final positions, while resolving any remaining overlaps.
By adding tick event like …
… and a corresponding
on:tick
toForceSimulation
one would be able to implement collision easing (or any other dynamic simulation fine-tuning for that matter) along these (pseudo-code) lines, by coupling the weighted strength to the simulation's currentalpha
value (or any other timing value available to the component itself):The text was updated successfully, but these errors were encountered: