jasondavies / d3-cloud

Create word clouds in JavaScript.
https://www.jasondavies.com/wordcloud/
Other
3.82k stars 1.08k forks source link

feature: blink words to load more? #169

Open ycgambo opened 3 years ago

ycgambo commented 3 years ago

here is what I try to do by using jquery:

var func = (v) => {
    $(v).css('opacity', 0)
    setTimeout(()=> {
        $(v).text(parseInt(Math.random() * 100))
        $(v).css('opacity', 1)
        setTimeout(func.bind(this, v), 3000 + Math.random() * 3000)
    },5000)
}

$('svg text').each((k, v) => {
    $(v).css('transition', 'opacity 5s cubic-bezier(0.4, 0, 0.2, 1) 0s')
    setTimeout(func.bind(this, v), Math.random() * 10000)
})

GIF 12-2 21-30-05

ycgambo commented 3 years ago

words has different lengths and font-sizes. the code above will actually cause a text overlap. I hope someone will introduce a good way to blink them in appropriate position.

jasondavies commented 2 years ago

The current implementation only places a static set of words in one go: it can't deal with adding new words and placing them dynamically. Might be interesting for a future version.