svelte-d3-cloud

Svelte wrapper for d3-cloud. See Demo

Installation

``js
npm install svelte-d3-cloud
`
or
`js
yarn add svelte-d3-cloud
`

Usage

`html

`

Props


| Property | Description | Default Value |
|----------|-------------------------|---------------|
| words | Array of object contains text and count value ` [{text : "some", count: 10},...] `` | undefined |
| width | Set the word cloud canvas width | 500 |
| height | Set the word cloud canvas height | 500 |
| backgroundColor | Set the canvas background color | '#fff' |
| font | Set the word font family | 'Impact' |
| padding | Set the padding of each text | 10 |
| scheme | Set the word cloud text color scheme based on d3-scale-chromatic (schemeCategory10 , schemeAccent, schemeDark2, schemePaired, schemePastel1, schemePastel2, schemeSet1, schemeSet2, schemeSet3, schemeTableau10) | 'schemeTableau10' |
| minRotate | Set the minimum rotation of the text | 0 |
| maxRotate | Set the maximum rotation of the text | 0 |
| maxFontSize | Set the maximum font size of the text | 50 |

Events

| Event | Description |
|----------|-------------------------|
| on:click | Listen to event when word is clicked |
| on:mouseover | Listen to event when word is hovered |
| on:mouseout | Listen to event when mouse leave the word|
| on:mousemove | Listen to event when mouse move inside the word |