reduxjs / d3-state-visualizer

Real-time visualizations of your application state
https://www.npmjs.com/package/d3-state-visualizer
MIT License
104 stars 23 forks source link

Nodes are not reused properly when adding/removing them #12

Closed kachkaev closed 6 years ago

kachkaev commented 7 years ago

Hey guys!

Looks like there is an issue with how d3 reuses nodes. Here is what's happening when I add three leafs to a list at the very top one by one and then remove them (also one by one):

anim

The second (the largest) state branch is not affected at all, but there's quite a lot going on visually.

Those strange unexpected horisontal jumps probably happen because of how d3 treats ids of the nodes. If they are represented as an array and id = i, adding or removing an item in the middle of it is likely to bring in this effect.