How to get dash-d3cloud wordcloud word selection

Dash Python
,
1

Someone made dash-d3cloud, a great plotly dash component wrapper for react-wordcloud. It makes really nice wordclouds for plotly dash, but as far as I can tell, it’s missing a prop for the selected word, meaning I can’t trigger a callback using the selected word. I’m not all that familiar with react or d3, so does anybody have some idea of how to add that functionality?

2 Likes
2

Hi,

It doesn’t look that complicated, as one can pass callback functions to the React component (see here). So it is “just” a matter of provide the onWordClick callback to the object:

this.props.callbacks = {onWordClick: (word) => setProps({value: word.value})}

Then the “value” prop (or whatever name you want to give) needs to be declared in PropTypes, so it gets exported as parameter (read-only) to the component on the Python side.

Of course, all of the above probably doesn’t make any sense to you, but I would strongly encourage you to take a look on the documentation regarding custom components and React in general:

I am pretty sure you will find helpful people in this forum to chip in and give tips as you make the changes. :slightly_smiling_face:

1 Like
3

Thanks! I’m not quite where to put the this.props.callbacks = {onWordClick: (word) => setProps({"value": word})} bit. I added it to the componentWillMount bit and the render bit in WordCloud.react.js, and added value: PropTypes.string to WordCloud.propTypes. But i’m still getting an error that says “Invalid prop for this component”. I assume the value prop isn’t getting passed to react-wordcloud?

4

Do you have a fork to the repo with your changes? It is easier to see what you have changed on github…

5

I do now: GitHub - aboyher/dash_d3cloud: Dash Component able to render wordclouds

1 Like