|
| 1 | +// ref: https://github.com/Yoctol/react-d3-cloud/blob/b7a35e3d6a5db85a616847328c6f798213fb9667/src/WordCloud.tsx |
| 2 | + |
| 3 | +import { useRef, memo, type FC, useEffect } from 'react'; |
| 4 | +import cloud from 'd3-cloud'; |
| 5 | +import isDeepEqual from 'react-fast-compare'; |
| 6 | +import { type BaseType, type ValueFn, select } from 'd3-selection'; |
| 7 | +import { scaleOrdinal } from 'd3-scale'; |
| 8 | +import { schemeCategory10 } from 'd3-scale-chromatic'; |
| 9 | + |
| 10 | +interface Datum { |
| 11 | + text: string; |
| 12 | + value: number; |
| 13 | +} |
| 14 | + |
| 15 | +export interface Word extends cloud.Word { |
| 16 | + text: string; |
| 17 | + value: number; |
| 18 | +} |
| 19 | + |
| 20 | +type Props = { |
| 21 | + data: Datum[]; |
| 22 | + width?: number; |
| 23 | + height?: number; |
| 24 | + font?: string | ((word: Word, index: number) => string); |
| 25 | + fontStyle?: string | ((word: Word, index: number) => string); |
| 26 | + fontWeight?: string | number | ((word: Word, index: number) => string | number); |
| 27 | + fontSize?: number | ((word: Word, index: number) => number); |
| 28 | + spiral?: 'archimedean' | 'rectangular' | ((size: [number, number]) => (t: number) => [number, number]); |
| 29 | + padding?: number | ((word: Word, index: number) => number); |
| 30 | + random?: () => number; |
| 31 | + fill?: ValueFn<SVGTextElement, Word, string>; |
| 32 | + onWordClick?: (this: BaseType, event: unknown, d: Word) => void; |
| 33 | + onWordMouseOver?: (this: BaseType, event: unknown, d: Word) => void; |
| 34 | + onWordMouseOut?: (this: BaseType, event: unknown, d: Word) => void; |
| 35 | +}; |
| 36 | + |
| 37 | +const defaultScaleOrdinal = scaleOrdinal(schemeCategory10); |
| 38 | + |
| 39 | +const WordCloud: FC<Props> = ({ |
| 40 | + data, |
| 41 | + width = 700, |
| 42 | + height = 600, |
| 43 | + font = 'serif', |
| 44 | + fontStyle = 'normal', |
| 45 | + fontWeight = 'normal', |
| 46 | + fontSize = (d) => Math.sqrt(d.value), |
| 47 | + // eslint-disable-next-line no-bitwise |
| 48 | + spiral = 'archimedean', |
| 49 | + padding = 1, |
| 50 | + // @ts-ignore The ordinal function should accept number |
| 51 | + fill = (_, i) => defaultScaleOrdinal(i), |
| 52 | + onWordClick, |
| 53 | + onWordMouseOver, |
| 54 | + onWordMouseOut, |
| 55 | +}) => { |
| 56 | + const ref = useRef<HTMLDivElement>(null); |
| 57 | + |
| 58 | + useEffect(() => { |
| 59 | + if (!ref.current) return; |
| 60 | + |
| 61 | + // clear old data |
| 62 | + select(ref.current).select('svg').remove(); |
| 63 | + |
| 64 | + // render based on new data |
| 65 | + const layout = cloud<Word>() |
| 66 | + .words(data) |
| 67 | + .size([width, height]) |
| 68 | + .font(font) |
| 69 | + .fontStyle(fontStyle) |
| 70 | + .fontWeight(fontWeight) |
| 71 | + .fontSize(fontSize) |
| 72 | + .spiral(spiral) |
| 73 | + .padding(padding) |
| 74 | + .rotate(() => 0) |
| 75 | + .random(Math.random) |
| 76 | + .on('end', (words) => { |
| 77 | + const [w, h] = layout.size(); |
| 78 | + |
| 79 | + const texts = select(ref.current) |
| 80 | + .append('svg') |
| 81 | + .attr('viewBox', `0 0 ${w} ${h}`) |
| 82 | + .attr('width', w) |
| 83 | + .attr('height', h) |
| 84 | + .attr('preserveAspectRatio', 'xMinYMin meet') |
| 85 | + .append('g') |
| 86 | + .attr('transform', `translate(${w / 2},${h / 2})`) |
| 87 | + .selectAll('text') |
| 88 | + .data(words) |
| 89 | + .enter() |
| 90 | + .append('text') |
| 91 | + .style('font-family', ((d) => d.font) as ValueFn<SVGTextElement, Word, string>) |
| 92 | + .style('font-style', ((d) => d.style) as ValueFn<SVGTextElement, Word, string>) |
| 93 | + .style('font-weight', ((d) => d.weight) as ValueFn<SVGTextElement, Word, string | number>) |
| 94 | + .style('font-size', ((d) => `${d.size}px`) as ValueFn<SVGTextElement, Word, string>) |
| 95 | + .style('fill', fill) |
| 96 | + .attr('text-anchor', 'middle') |
| 97 | + .attr('transform', (d) => `translate(${[d.x, d.y]})rotate(${d.rotate})`) |
| 98 | + .text((d) => d.text); |
| 99 | + |
| 100 | + if (onWordClick) { |
| 101 | + texts.on('click', onWordClick); |
| 102 | + } |
| 103 | + if (onWordMouseOver) { |
| 104 | + texts.on('mouseover', onWordMouseOver); |
| 105 | + } |
| 106 | + if (onWordMouseOut) { |
| 107 | + texts.on('mouseout', onWordMouseOut); |
| 108 | + } |
| 109 | + }); |
| 110 | + |
| 111 | + layout.start(); |
| 112 | + }, [ |
| 113 | + data, |
| 114 | + fill, |
| 115 | + font, |
| 116 | + fontSize, |
| 117 | + fontWeight, |
| 118 | + fontStyle, |
| 119 | + height, |
| 120 | + onWordClick, |
| 121 | + onWordMouseOut, |
| 122 | + onWordMouseOver, |
| 123 | + padding, |
| 124 | + spiral, |
| 125 | + width, |
| 126 | + ]); |
| 127 | + |
| 128 | + return <div ref={ref} />; |
| 129 | +}; |
| 130 | + |
| 131 | +export default memo(WordCloud, isDeepEqual); |
0 commit comments