search

IjzerenHein / react-tag-cloud

Create beautiful tag/word clouds using React ☁️
https://react-tag-cloud.stackblitz.io/
MIT License
117 stars 27 forks source link

Bug: overlapping words #15

Open drag0s opened 5 years ago

drag0s commented 5 years ago

Hey there! 👋

Sometimes I experience overlapping words like in this picture:

image

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 commented 4 years ago

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

image

dkadrios commented 3 years ago

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