Bug: overlapping words

[drag0s]

Hey there! 👋

Sometimes I experience overlapping words like in this picture:

Is there anything I can do to avoid overlapping words?

The code from the screenshot: (https://stackblitz.com/edit/react-tag-cloud-dqfvdv?file=App.js)

<TagCloud
        style={{
          fontFamily: 'sans-serif',
          color: 'blue',
          width: '100%',
          height: '400px',
        }}
>
        <div style={{fontSize: 20}}>easy</div>
        <div style={{fontSize: 20}}>income</div>
        <div style={{fontSize: 20}}>platform</div>
        <div style={{fontSize: 20}}>streamers</div>
        <div style={{fontSize: 20}}>asd</div>
        <div style={{fontSize: 70}}>money</div>
        <div style={{fontSize: 20}}>communication</div>
        <div style={{fontSize: 20}}>audience</div>
        <div style={{fontSize: 20}}>nice</div>
        <div style={{fontSize: 20}}>logos</div>
        <div style={{fontSize: 20}}>twitch</div>
        <div style={{fontSize: 20}}>stream</div>
</TagCloud>

Thanks in advance!

[shp7724]

Same here. Seems like it's failing to calculate the positions of word, unlike the demo.

[dkadrios]

I ran into this as well, but I managed to get it working in the end. For me, it was the ommision of some things from the demo which seemed superfluous at the time, along with using the material-ui style system, rather than inline styles.

The inline styles on the WordCloud tag are necessary as it appears that the underlying d3-cloud component uses it to determine metrics. In particular, it needs fontSize and padding (and maybe more?). Setting these through className did not work, it had to be set through style.

HTH