angular-d3-word-cloud #


Run examples with server ##

``
$ npm install
$ npm run test
$ npm run dev //default server port is 8000
$ npm run release //build release files
`

Dependencies ##

* angular.js
* d3.js
* d3.layout.cloud.js

Demo ##

Watch the wordcloud component in action on the demo page.

How to use ##

$3

##### bower #####

$ bower install angular-d3-word-cloud

angular.js, d3.js, d3.layout.cloud.js would be install as dependencies auto. If it won't for some error, install it manually.

$ bower install angular
$ bower install d3
$ bower install d3-cloud


##### npm #####
`
$ npm install angular-d3-word-cloud
`

Inject scripts ##

Add dependencies to the section of your index html:

`html





`

Options ##

Note: if words element not contains color property, default will use d3 schemeCategory20
* words=[array] -> [{text: '',size: 0, color: '#6d989e', tooltipText: ''}]
* height=[number]
* width=[number]
* padding=[number] -> [optional] padding for each word, defaults to 5
rotate=[number, function] -> [optional] rotation for each word, default to ~~(Math.random() 2) * 60
* random=[function] -> [optional] default to Math.random, If specified, sets 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).
* use-tooltip=[boolean] default tooltip template
* use-transition=[boolean] transition with font size
* on-click=[function] -> word clicked callback

Directive Usage ##

`html

`

Basic usage ##

Inject angular-d3-word-cloud into angular module, set up some options to our controller

`javascript
(function(){
angular.module('app',['angular-d3-word-cloud'])
.controller('appController',['$window','$element',appController])
function appController($window,$element){
var self = this;
self.height = $window.innerHeight * 0.5;
self.width = $element.find('#wordsCloud')[0].offsetWidth;
self.wordClicked = wordClicked;
self.rotate = rotate;
self.useTooltip = true;
self.useTransition = false;
self.words = [
{text: 'Angular',size: 25, color: '#6d989e', tooltipText: 'Angular Tooltip'},
{text: 'Angular2',size: 35, color: '#473fa3', tooltipText: 'Angular2 Tooltip'}
]
self.random = random;

function random() {
return 0.4; // a constant value here will ensure the word position is fixed upon each page refresh.
}

function rotate() {
return ~~(Math.random() 2) 90;
}

function wordClicked(word){
alert('text: ' + word.text + ',size: ' + word.size);
}
}
})()
`

Advanced usage ##

$3

`javascript
var content = 'Angular Angular2 Angular3 Express Nodejs';
originWords = self.content.split(/\s+/g);
originWords = originWords.map(function(word) {
return {
text: word,
count: Math.floor(Math.random() * maxWordCount)
}
}).sort(function(a, b) {
return b.count - a.count;
})
`

$3

`javascript
var element = document.getElementById('wordsCloud');
var height = $window.innerHeight * 0.75;
element.style.height = height + 'px';
var width = element.getBoundingClientRect().width;
var maxCount = originWords[0].count;
var minCount = originWords[originWords.length - 1].count;
var maxWordSize = width * 0.15;
var minWordSize = maxWordSize / 5;
var spread = maxCount - minCount;
if (spread <= 0) spread = 1;
var step = (maxWordSize - minWordSize) / spread;
self.words = originWords.map(function(word) {
return {
text: word.text,
size: Math.round(maxWordSize - ((maxCount - word.count) * step)),
color: '#473fa3'//you can assign custom color
}
})
self.width = width;
self.height = height;
``

References ##

* Word Cloud Layout by Jason Davies.
* D3.js