Name: react-d3-cloud
Owner: YOCTOL INFO INC.
Description: A word cloud react component built with d3-cloud.
Created: 2016-08-05 08:01:59.0
Updated: 2018-01-18 01:09:57.0
Pushed: 2017-12-29 17:09:52.0
Homepage: https://yoctol.github.io/react-d3-cloud
Size: 377
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|---|---|
| ??? Wu, Dung-Ie | 2017-02-24 15:07:47.0 | 7 |
| C. T. Lin | 2017-01-20 03:11:16.0 | 24 |
| Po-Hsien Chu | 2018-02-05 11:21:20.0 | 115 |
| Andy C | 2017-04-19 18:54:17.0 | 3 |
| Greenkeeper | 2017-05-16 20:07:56.0 | 22 |
| hilb-aibod | 2017-08-04 01:20:51.0 | 1 |
Other Committers
| User | Most Recent Commit | # Commits | |
|---|---|---|---|
| Bruno Rodrigues | brodrigues@eckert-caine.com | 2017-12-29 17:09:39.0 | 4 |
A word cloud react component built with d3-cloud.
install react-d3-cloud
sx
rt React from 'react';
rt { render } from 'react-dom';
rt WordCloud from 'react-d3-cloud';
t data = [
text: 'Hey', value: 1000 },
text: 'lol', value: 200 },
text: 'first impression', value: 800 },
text: 'very cool', value: 1000000 },
text: 'duck', value: 10 },
t fontSizeMapper = word => Math.log2(word.value) * 5;
t rotate = word => word.value % 360;
er(
ordCloud
data={data}
fontSizeMapper={fontSizeMapper}
rotate={rotate}
,
cument.getElementById('root')
Please checkout demo
for more detailed props, please refer to below:
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 clicking in a word | Function: word => onWordClick(word) | | console.log(word)
run build
apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
install
test
MIT © Yoctol