rdc
@nhuson/react-d3-cloud
npm i @nhuson/react-d3-cloud
rdc

@nhuson/react-d3-cloud

a word cloud component using d3-cloud

by Nhu son

1.0.19 (see all)License:ISCTypeScript:Not Found
Categories:React Word Cloud
npm i @nhuson/react-d3-cloud
Readme

react-d3-cloud

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][david_img]][david_site]

A word cloud react component built with d3-cloud.

image

Usage

npm install @nhuson/react-d3-cloud
import React from "react";
import { render } from "react-dom";
import WordCloud from "@nhuson/react-d3-cloud";

const data = [
  { text: "Hello", value: 1000, color: "grey", fontWeight: 500 },
  { text: "lol", value: 200, color: "grey", fontWeight: "normal" },
  { text: "first impression", value: 800, color: "#ccc", fontWeight: "bold" },
  { 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")
);

for more detailed props, please refer to below:

Props

namedescriptiontyperequireddefault
dataThe input data for renderingArray<{ text: string, value: number }>
widthWidth of component (px)number700
heightHeight of component (px)number600
fontSizeMapperMap each element of data to font size (px)Function: (word: string, idx: number): numberword => word.value;
rotateMap each element of data to font rotation degree. Or simply provide a number for global rotation. (degree)Function | number0
paddingMap each element of data to font padding. Or simply provide a number for global padding. (px)Function | number5
fontThe font of text shownFunction | stringserif
onWordClickFunction called when click event triggered on a wordFunction: word => {}null
onWordMouseOverFunction called when mouseover event triggered on a wordFunction: word => {}null
onWordMouseOutFunction called when mouseout event triggered on a wordFunction: word => {}null
defaultColorDefault color text, if not set color in dataString#333
formatImgDownloadFormat image base64Stringpng

Convert chart to base64 image

import React, { useRef, useEffect } from "react";
import { render } from "react-dom";
import WordCloud from "@nhuson/react-d3-cloud";

const data = [
  { text: "Hello", value: 1000, color: "grey", fontWeight: 500 },
  { text: "lol", value: 200, color: "grey", fontWeight: "normal" },
  { text: "first impression", value: 800, color: "#ccc", fontWeight: "bold" },
  { text: "very cool", value: 1000000 },
  { text: "duck", value: 10 }
];
const Cloud = (props) => {
    const cloudRef = useRef();
    useEffect(() => {
        cloudRef.current.toBase64Image().then(imgBase64 => console.log(imgBase64))
    }, [])
    return (
         <WordCloud
          height={300}
          data={data}
          padding={10}
          ref={cloudRef}
    />
    )
}

Build

npm run build

Test

pre-install

Mac OS X

brew install pkg-config cairo pango libpng jpeg giflib librsvg
npm install