31 | 32 |

33 | Dependencies

34 | 38 | 39 |

How to use

40 |
Bower install
41 |
42 | 
$ bower install angular-d3-word-cloud
43 |
44 |

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

45 |
46 | 
$ bower install angular
 47 | $ bower install d3
 48 | $ bower install d3-cloud
49 |
Add dependencies to the section of your index html:
50 | 
<meta charset="utf-8">  <!-- it's important for d3.js -->
 51 | <script src="bower_components/jquery/dist/jquery.min.js"></script>
 52 | <script src="bower_components/angular/angular.min.js"></script>
 53 | <script src="bower_components/d3/d3.min.js"></script>
 54 | <script src="bower_components/d3-cloud/build/d3.layout.cloud.js"></script>
 55 | <script src="bower_components/angular-d3-word-cloud/dist/angular-word-cloud.min.js"></script>
 56 |
57 |

58 | Options

59 | 73 |

74 | Directive Usage

75 | 
<div id="wordsCloud">
 76 |    <word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height"
 77 |          padding="10" 
 78 |          rotate="appCtrl.rotate" 
 79 |          random="appCtrl.random" 
 80 |          use-tooltip="appCtrl.useTooltip" 
 81 |          use-transition="appCtrl.useTransition" 
 82 |          on-click="appCtrl.wordClicked">
 83 |    </word-cloud>
 84 | </div>
85 |

86 | Base usage

87 |

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

88 | 
    (function(){
 89 |     angular.module('app',['angular-d3-word-cloud'])
 90 |         .controller('appController',['$window','$element',appController])
 91 |     function appController($window,$element){
 92 |         var self = this;
 93 |         self.height = $window.innerHeight * 0.5;
 94 |         self.width = $element.find('word-cloud')[0].offsetWidth;
 95 |         self.wordClicked = wordClicked;
 96 |         self.rotate = rotate;
 97 |         self.useTooltip = true;
 98 |         self.useTransition = true;
 99 |         self.words = [
100 |             {text: 'Angular',size: 25,color: '#0e6632',tooltipText: 'Angular Tooltip'},
101 |             {text: 'Angular2',size: 35,color: '#0e558',tooltipText: 'Angular2 Tooltip'}
102 |         ]
103 |         
104 |         //custom rotate
105 |         function rotate(){
106 |             return ~~(Math.random() * 2) * 90;
107 |         }
108 | 
109 |         //custom random
110 |         function random(){
111 |             return 0.4; //a constant value here will ensure the word position is fixed upon each page refresh.
112 |         }
113 | 
114 |        
115 |         function wordClicked(word){
116 |             alert(word);
117 |         }
118 |     }
119 | })()
120 |

121 | 122 | 123 | 124 |

Example

125 | 126 |
127 | Padding: 128 |
129 |

130 |
131 | Custom words color: 132 |
133 |

134 |
135 | Rotate: 136 |
137 |

138 | 139 |

140 |
141 | 145 | 149 |
150 |

151 |
152 |
155 |
156 | 157 | 158 |
159 | 160 |

161 | Advance usage

162 |

163 | Define some content and split(/\s+/g)

164 | 
    var content = 'Angular Angular2 Angular3 Express Nodejs';
165 |     originWords = self.content.split(/\s+/g);
166 |     originWords = originWords.map(function(word) {
167 |         return {
168 |             text: word,
169 |             count: Math.floor(Math.random() * maxWordCount)
170 |         }
171 |      }).sort(function(a, b) {
172 |           return b.count - a.count;
173 |      })
174 |

175 | Compute word size

176 | 
     var element = $element.find('#wordsCloud');
177 |      var height = $window.innerHeight * 0.75;
178 |      element.height(height);
179 |      var width = element[0].offsetWidth;
180 |      var maxCount = originWords[0].count;
181 |      var minCount = originWords[originWords.length - 1].count;
182 |      var maxWordSize = width * 0.15;
183 |      var minWordSize = maxWordSize / 5;
184 |      var spread = maxCount - minCount;
185 |      if (spread <= 0) spread = 1;
186 |      var step = (maxWordSize - minWordSize) / spread;
187 |      self.words = originWords.map(function(word) {
188 |          return {
189 |              text: word.text,
190 |              size: Math.round(maxWordSize - ((maxCount - word.count) * step)),
191 |              color: self.customColor,
192 |              tooltipText: word.text + 'tooltip',
193 |          }
194 |      })
195 |      self.width = width;
196 |      self.height = height;
197 | 201 |