@diego.caceres/react-d3-cloud
v0.7.1
Published
a word cloud component using d3-cloud
Downloads
10
Readme
react-d3-cloud
A word cloud react component built with d3-cloud.
Usage
npm install react-d3-cloud
import React from "react";
import { render } from "react-dom";
import WordCloud from "react-d3-cloud";
const data = [
{ text: "Hey", value: 1000 },
{ text: "lol", value: 200 },
{ text: "first impression", value: 800 },
{ text: "very cool", value: 1000000 },
{ text: "duck", value: 10 }
];
const fontSizeMapper = word => Math.log2(word.value) * 5;
const rotate = word => word.value % 360;
render(
<WordCloud data={data} fontSizeMapper={fontSizeMapper} rotate={rotate} />,
document.getElementById("root")
);
Please checkout demo
for more detailed props, please refer to below:
Props
| name | description | type | required | default |
| --------------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------- | -------- | --------------------- |
| data | The input data for rendering | Array<{ text: string, value: number }> | ✓ |
| width | Width of component (px) | number | | 700 |
| height | Height of component (px) | number | | 600 |
| fontSizeMapper | Map each element of data
to font size (px) | Function: (word: string, idx: number): number
| | word => word.value;
|
| rotate | Map each element of data
to font rotation degree. Or simply provide a number for global rotation. (degree) | Function | number | | 0 |
| padding | Map each element of data
to font padding. Or simply provide a number for global padding. (px) | Function | number | | 5 |
| font | The font of text shown | Function | string | | serif |
| onWordClick | Function called when click event triggered on a word | Function: word => {}
| | null |
| onWordMouseOver | Function called when mouseover event triggered on a word | Function: word => {}
| | null |
| onWordMouseOut | Function called when mouseout event triggered on a word | Function: word => {}
| | null |
Build
npm run build
Test
pre-install
Mac OS X
brew install pkg-config cairo pango libpng jpeg giflib librsvg
npm install
Ubuntu and other Debian based systems
sudo apt-get update
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
npm install
For more details, please check out Installation guides at node-canvas wiki.
Run test
npm test
License
MIT © Yoctol