diff --git a/README.md b/README.md index 288fef7..c78eb89 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ for more detailed props, please refer to below: | padding | The padding accessor function, which indicates the numerical padding for each word. | `number \| (d) => number` | | `1` | | random | The internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range `[0, 1)`. | `(d) => number` | | `Math.random` | | fill | The fill accessor function, which indicates the color for each word. | `(d, i) => string` | | `(d, i) => schemeCategory10ScaleOrdinal(i)` | +| wordClassNames | The classNames accessor function, which indicates the `class` for each word. | `(d, i) => string` | | `() => ''` | | onWordClick | The function will be called when `click` event is triggered on a word | `(event, d) => {}` | | null | | onWordMouseOver | The function will be called when `mouseover` event is triggered on a word | `(event, d) => {}` | | null | | onWordMouseOut | The function will be called when `mouseout` event is triggered on a word | `(event, d) => {}` | | null | diff --git a/src/WordCloud.tsx b/src/WordCloud.tsx index 5963d97..2d49c5c 100644 --- a/src/WordCloud.tsx +++ b/src/WordCloud.tsx @@ -35,6 +35,7 @@ type WordCloudProps = { padding?: number | ((word: Word, index: number) => number); random?: () => number; fill?: ValueFn; + wordClassNames?: ValueFn; onWordClick?: (this: BaseType, event: any, d: Word) => void; onWordMouseOver?: (this: BaseType, event: any, d: Word) => void; onWordMouseOut?: (this: BaseType, event: any, d: Word) => void; @@ -58,6 +59,7 @@ function WordCloud({ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore The ordinal function should accept number fill = (_, i) => defaultScaleOrdinal(i), + wordClassNames = () => '', onWordClick, onWordMouseOver, onWordMouseOut, @@ -115,6 +117,7 @@ function WordCloud({ ((d) => `${d.size}px`) as ValueFn ) .style('fill', fill) + .attr('class', (d, i, nodes) => wordClassNames.call(nodes[i], d, i, nodes)) .attr('text-anchor', 'middle') .attr('transform', (d) => `translate(${[d.x, d.y]})rotate(${d.rotate})`) .text((d) => d.text);