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

Overlapping word cloud #2

Closed Meruja closed 5 years ago

Meruja commented 6 years ago

I have used your library to produce word cloud. When I use rotation function to rotate words I got overlapping. How to resolve it? Do I need to modify the CSS file? img5

IjzerenHein commented 6 years ago

Can you provide me with a link to the code?

Meruja commented 6 years ago

yeah... sure.. WordCloud.jsx.tar.gz

Meruja commented 6 years ago

I have fixed that. It's my fault. Shall I close the issue? But one thing I need to clarify. If you are using d3-cloud as backbone then it should produce the wordCloud as below. But why you could not support to random rotation? d3cloud

IjzerenHein commented 6 years ago

What do you mean, I don't understand your last question. You can still do that, you can pass in a Function to the rotate prop.

Meruja commented 6 years ago

What I try to say is, when we use rotate=Math.random() function, the wordcloud should look like the above image. But when I use tag-cloud library, for rotate=Math.random() it horizontally displays words. Random means it should display words in different angle. Am I? I don't understand what do you mean by "can pass in a Function to the rotate prop."?

IjzerenHein commented 6 years ago

@Meruja Could you paste a code snippet here on how you are using it?

Meruja commented 6 years ago

<TagCloud className='tag-cloud' style={{ fontFamily: 'sans-serif', //fontSize: () => Math.round(Math.random() 50) + 16, fontSize: 30, color: () => randomColor(), padding: 12, }}> { this.state.wordList.map((e,key) => { if (e.text.length>5){ return <div rotate={Math.random()} style={{fontSize: Math.random() e.text.length}}>{e.text}

} else { return <div rotate={Math.random() 90} style={{fontSize: Math.random() e.text.length}}>{e.text}
}

                            })
                        }
                    </TagCloud>
IjzerenHein commented 6 years ago

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

IjzerenHein commented 6 years ago

You're not using using rotate in your example.

Meruja commented 6 years ago

I have used..... but it is not showing error11 WordCloud.jsx.tar.gz This is my code

IjzerenHein commented 6 years ago

Hi, ah I see now. I've taken a closer look at the issues and found a couple problems. I've published a new version (v1.1.2), which fixes the bulk of the placement issues. In some cases I still see very small overlapping issues though, but it should be a lot better. Cheers

PS, you can use the triple backtick technique to paste in code fragments, making it easier for everyone to read. No need to paste in images that way ;) https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code