Skip to content
angular directive of D3 word cloud plugin, include simple options to binding.
JavaScript
Branch: master
Clone or download
weihanchen Merge pull request #14 from vicdashkov/fit/tooltip-firefox
added fix to support tooltip on firefox
Latest commit 66464ea Apr 15, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
src
test
.eslintrc.yml
.gitignore
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
karma.conf.js Add property of padding, use esLint to check code style, release with… Mar 13, 2017
package.json Fix main property Jan 1, 2018
run.js Add property of padding, use esLint to check code style, release with… Mar 13, 2017

README.md

angular-d3-word-cloud

Build Status Coverage Status

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 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

<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;

References

You can’t perform that action at this time.