diff --git a/README.md b/README.md index 49e915c..0e170d1 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ More configuration: import React from 'react'; import { render } from 'react-dom'; import WordCloud from 'react-d3-cloud'; +import { scaleOrdinal } from 'd3-scale'; +import { schemeCategory10 } from 'd3-scale-chromatic'; const data = [ { text: 'Hey', value: 1000 }, @@ -59,6 +61,7 @@ render( rotate={(word) => word.value % 360} padding={5} random={Math.random} + fill={(d, i) => scaleOrdinal(schemeCategory10)(i)} onWordClick={(word) => { console.log(`onWordClick: ${word}`); }} @@ -79,22 +82,23 @@ for more detailed props, please refer to below: ## Props -| name | description | type | required | default | -| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------- | ---------------------------------------- | +| name | description | type | required | default | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------- | --------------------------------------------- | | data | The words array | `{ text: string, value: number }>[]` | ✓ | -| width | Width of the layout (px) | `number` | | `700` | -| height | Height of the layout (px) | `number` | | `600` | -| font | The font accessor function, which indicates the font face for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'serif'` | -| fontStyle | The fontStyle accessor function, which indicates the font style for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'normal'` | -| fontWeight | The fontWeight accessor function, which indicates the font weight for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'normal'` | -| fontSize | The fontSize accessor function, which indicates the numerical font size for each word. | `(d) => number` | | `(d) => Math.sqrt(d.value)` | -| rotate | The rotate accessor function, which indicates the rotation angle (in degrees) for each word. | `(d) => number` | | `() => (~~(Math.random() * 6) - 3) * 30` | -| spiral | The current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used | `string \| ([width, height]) => t => [x, y]` | | `'archimedean'` | -| 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` | -| onWordClick | The function will be called when `click` event is triggered on a word | `word => {}` | | null | -| onWordMouseOver | The function will be called when `mouseover` event is triggered on a word | `word => {}` | | null | -| onWordMouseOut | The function will be called when `mouseout` event is triggered on a word | `word => {}` | | null | +| width | Width of the layout (px) | `number` | | `700` | +| height | Height of the layout (px) | `number` | | `600` | +| font | The font accessor function, which indicates the font face for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'serif'` | +| fontStyle | The fontStyle accessor function, which indicates the font style for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'normal'` | +| fontWeight | The fontWeight accessor function, which indicates the font weight for each word. A constant may be specified instead of a function. | `string \| (d) => string` | | `'normal'` | +| fontSize | The fontSize accessor function, which indicates the numerical font size for each word. | `(d) => number` | | `(d) => Math.sqrt(d.value)` | +| rotate | The rotate accessor function, which indicates the rotation angle (in degrees) for each word. | `(d) => number` | | `() => (~~(Math.random() * 6) - 3) * 30` | +| spiral | The current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used | `string \| ([width, height]) => t => [x, y]` | | `'archimedean'` | +| 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) => scaleOrdinal(schemeCategory10)(i)` | +| onWordClick | The function will be called when `click` event is triggered on a word | `word => {}` | | null | +| onWordMouseOver | The function will be called when `mouseover` event is triggered on a word | `word => {}` | | null | +| onWordMouseOut | The function will be called when `mouseout` event is triggered on a word | `word => {}` | | null | ## Next.js/SSR diff --git a/src/WordCloud.js b/src/WordCloud.js index 071cda8..3042158 100644 --- a/src/WordCloud.js +++ b/src/WordCloud.js @@ -6,8 +6,6 @@ import { schemeCategory10 } from 'd3-scale-chromatic'; import { select } from 'd3-selection'; import { useRef } from 'react'; -const fill = scaleOrdinal(schemeCategory10); - // From: https://github.com/jasondavies/d3-cloud/blob/4fc1a943d01d270e7838c97bb8ee48ca15da20be/index.js#L355-L378 function archimedeanSpiral(size) { const e = size[0] / size[1]; @@ -70,6 +68,7 @@ function WordCloud(props) { spiral, padding, random, + fill, onWordClick, onWordMouseOver, onWordMouseOut, @@ -112,7 +111,7 @@ function WordCloud(props) { .style('font-style', (d) => d.style) .style('font-weight', (d) => d.weight) .style('font-size', (d) => `${d.size}px`) - .style('fill', (d, i) => fill(i)) + .style('fill', fill) .attr('text-anchor', 'middle') .attr('transform', (d) => `translate(${[d.x, d.y]})rotate(${d.rotate})`) .text((d) => d.text); @@ -150,6 +149,7 @@ WordCloud.propTypes = { spiral: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), padding: PropTypes.oneOfType([PropTypes.number, PropTypes.func]), random: PropTypes.func, + fill: PropTypes.func, onWordClick: PropTypes.func, onWordMouseOut: PropTypes.func, onWordMouseOver: PropTypes.func, @@ -167,6 +167,7 @@ WordCloud.defaultProps = { spiral: 'archimedean', padding: 1, random: Math.random, + fill: (d, i) => scaleOrdinal(schemeCategory10)(i), onWordClick: null, onWordMouseOver: null, onWordMouseOut: null,