Overlay bug when changing layout size

[StefanDimov]

Here is the code that breaks for me - https://gist.github.com/StefanDimov/88a4b2a749c267ab4f78

I want to change the layout size on window resize, so the space will be efficiently used, but sometimes when I shrink the browser's width as much as I can and then expand it some words start to layered on top of others. Doesn't occur consistently, but most of the times it's there.

[Kcnarf]

We also had an overlay issue when using 'cloudLayout.start()' in a loop, where each loop reduces the fontSize in order to overcome the 'bigger words not appearing' bug (see #36).

It appears that d3-cloud adds some info/attributes to the tags you pass in cloudLayout.words(). Notably, d3-cloud stores the 'x' and 'y' positions of each tag. When iterating, these pieces of information are not removed/refresh/updated. Hence, iteration N re-uses information produced previously, which leads to weird results (ie. overlapping).

We overcome the overlapping issue by manually removing the added information, and passing an array of 'fresh' tags to 'cloudLayout.words()'.

[Kcnarf]

Also, check the font family:
1- be sure that at line 80, d.font starts with 'lmpact'
2- (not sure) at line 94 use 'Impact' instead of 'impact' (upper case at first char)

[Laobiz]

How did you manage to remove the information manually? @Kcnarf

[GregoryPotdevin]

In case other people have this problem : we had the issue when running d3-cloud several times with decreasing font sizes until every word fit, every once in a while the layout would look random.
Using const words = cloneDeep(originalWords) fixed the issue (as Kcnarf said, d3-cloud injects some position infos which you'll want to flush)