Skip to content

Commit

Permalink
add the fill prop to support custom colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@chentsulin
chentsulin committed Aug 26, 2021
1 parent 7f68951 commit 9de8dd3
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 18 deletions.
34 changes: 19 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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}`);
}}
Expand All @@ -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

Expand Down
7 changes: 4 additions & 3 deletions src/WordCloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -70,6 +68,7 @@ function WordCloud(props) {
spiral,
padding,
random,
fill,
onWordClick,
onWordMouseOver,
onWordMouseOut,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit 9de8dd3

Please sign in to comment.