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
Demo
Watch the wordcloud component in action on the demo page.
How to use
Install
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:
<meta charset="utf-8"> <!-- it's important for d3.js --> <script src="[bower_components/node_modules]/angular/angular.min.js"></script> <script src="[bower_components/node_modules]/d3/d3.min.js"></script> <script src="[bower_components/node_modules]/d3-cloud/build/d3.layout.cloud.js"></script> <script src="[bower_components/node_modules]/angular-d3-word-cloud/dist/angular-word-cloud.min.js"></script>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 to5rotate=[number, function]-> [optional] rotation for each word, default to~~(Math.random() * 2) * 60random=[function]-> [optional] default toMath.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 templateuse-transition=[boolean]transition with font sizeon-click=[function]-> word clicked callback
Directive Usage
<div id="wordsCloud"> <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="5" rotate="appCtrl.rotate" use-tooltip="appCtrl.useTooltip" random="appCtrl.random" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked"> </word-cloud> </div>Basic usage
Inject angular-d3-word-cloud into angular module, set up some options to our controller
(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
Define some content and split(/\s+/g)
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; })Font size calculations
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;
