├── wordcloud-min.png
├── .gitignore
├── wordcloud-blue-min.png
├── wordcloud-single-min.png
├── src
    ├── index.js
    └── components
    │   └── WordCloud.vue
├── LICENSE
├── package.json
├── webpack.config.js
└── README.md


/wordcloud-min.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feifang/vue-wordcloud/HEAD/wordcloud-min.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log*
4 | yarn-debug.log*
5 | yarn-error.log*
6 | 


--------------------------------------------------------------------------------
/wordcloud-blue-min.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feifang/vue-wordcloud/HEAD/wordcloud-blue-min.png


--------------------------------------------------------------------------------
/wordcloud-single-min.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/feifang/vue-wordcloud/HEAD/wordcloud-single-min.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import wordcloud from './components/WordCloud.vue'
2 | export default wordcloud
3 | if (typeof window !== 'undefined' && window.Vue) {
4 |   window.Vue.component('word-cloud', wordcloud)
5 | }
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Karen (Fei) Fang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-wordcloud",
 3 |   "description": "A Vue.js Word Cloud component",
 4 |   "version": "1.1.1",
 5 |   "license": "MIT",
 6 |   "author": "fei.fang <karen.feifang@gmail.com>",
 7 |   "private": false,
 8 |   "main": "dist/word-cloud.js",
 9 |   "scripts": {
10 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
11 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
12 |   },
13 |   "dependencies": {
14 |     "d3": "^4.10.0",
15 |     "d3-cloud": "^1.2.4",
16 |     "d3-scale-chromatic": "^1.3.3",
17 |     "vue": "^2.3.3",
18 |     "vue-resize-directive": "^1.0.0"
19 |   },
20 |   "devDependencies": {
21 |     "babel-core": "^6.0.0",
22 |     "babel-eslint": "7.1.1",
23 |     "babel-loader": "^6.0.0",
24 |     "babel-plugin-transform-runtime": "^6.15.0",
25 |     "babel-preset-env": "^1.7.0",
26 |     "babel-runtime": "^6.11.6",
27 |     "cross-env": "^3.0.0",
28 |     "css-loader": "^0.25.0",
29 |     "eslint": "3.14.1",
30 |     "eslint-config-airbnb-base": "11.0.1",
31 |     "eslint-friendly-formatter": "2.0.7",
32 |     "eslint-import-resolver-webpack": "0.8.1",
33 |     "eslint-loader": "1.6.1",
34 |     "eslint-plugin-html": "2.0.0",
35 |     "eslint-plugin-import": "2.2.0",
36 |     "file-loader": "^0.9.0",
37 |     "uglifyjs-webpack-plugin": "^1.1.6",
38 |     "vue-loader": "^12.1.0",
39 |     "vue-template-compiler": "^2.3.3",
40 |     "webpack": "3.10.0",
41 |     "webpack-dev-server": "^3.1.10"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 4 | 
 5 | function resolve(dir) {
 6 |   return path.join(__dirname, '..', dir)
 7 | }
 8 | module.exports = {
 9 |   entry: './src/index.js',
10 |   output: {
11 |     path: path.resolve(__dirname, './dist'),
12 |     publicPath: '/dist/',
13 |     filename: 'word-cloud.js',
14 |     library: 'WordCloud',
15 |     libraryTarget: 'umd',
16 |     umdNamedDefine: true
17 |   },
18 |   module: {
19 |     rules: [{
20 |         test: /\.(js|vue)$/,
21 |         loader: 'eslint-loader',
22 |         enforce: 'pre',
23 |         include: [resolve('src')],
24 |         options: {
25 |           formatter: require('eslint-friendly-formatter')
26 |         }
27 |       },
28 |       {
29 |         test: /\.vue$/,
30 |         loader: 'vue-loader',
31 |         options: {
32 |           loaders: {
33 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
34 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
35 |             // other preprocessors should work out of the box, no loader config like this necessary.
36 |             // 'scss': 'vue-style-loader!css-loader!sass-loader',
37 |             // 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
38 |           }
39 |           // other vue-loader options go here
40 |         }
41 |       },
42 |       {
43 |         test: /\.js$/,
44 |         loader: 'babel-loader',
45 |         exclude: /node_modules/
46 |       },
47 |       {
48 |         test: /\.(png|jpg|gif|svg)$/,
49 |         loader: 'file-loader',
50 |         options: {
51 |           name: '[name].[ext]?[hash]'
52 |         }
53 |       }
54 |     ]
55 |   },
56 |   resolve: {
57 |     alias: {
58 |       'vue$': 'vue/dist/vue.esm.js'
59 |     }
60 |   },
61 |   devServer: {
62 |     historyApiFallback: true,
63 |     noInfo: true
64 |   },
65 |   performance: {
66 |     hints: false
67 |   },
68 |   devtool: '#eval-source-map'
69 | }
70 | 
71 | if (process.env.NODE_ENV === 'production') {
72 |   module.exports.devtool = '#source-map'
73 |   // http://vue-loader.vuejs.org/en/workflow/production.html
74 |   module.exports.plugins = (module.exports.plugins || []).concat([
75 |     new webpack.DefinePlugin({
76 |       'process.env': {
77 |         NODE_ENV: '"production"'
78 |       }
79 |     }),
80 |     new UglifyJsPlugin({
81 |       sourceMap: true,
82 |       uglifyOptions: {
83 |         ecma: 8,
84 |         compress: {
85 |           warnings: false
86 |         }
87 |       }
88 |     }),
89 |     new webpack.LoaderOptionsPlugin({
90 |       minimize: true
91 |     })
92 |   ])
93 | }
94 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-wordcloud
  2 | 
  3 | A Vue.js Word Cloud component based on the original [d3-cloud](https://github.com/jasondavies/d3-cloud) plugin.
  4 | 
  5 | **What's New?**
  6 | 
  7 | V1.1 Nov 25, 2018:
  8 | 
  9 | - Fix #6 add `showTooltip` option
 10 | - Fix #5 add support for custom color scales
 11 | 
 12 | V1.0.2 Aug 12, 2017:
 13 | 
 14 | - Additional font scale options
 15 | - Easy to use rotation setting
 16 | 
 17 | For details please refer to [options](https://github.com/feifang/vue-wordcloud#options).
 18 | 
 19 | ### Install
 20 | ```
 21 | npm install vue-wordcloud
 22 | 
 23 | ```
 24 | 
 25 | ### Import
 26 | ```
 27 | import wordcloud from 'vue-wordcloud'
 28 | ```
 29 | 
 30 | ### Examples
 31 | 
 32 | Using D3 color scheme Category10:
 33 | 
 34 | ![Word Cloud Example](wordcloud-min.png)
 35 | 
 36 | Using single color of your choice, e.g. `['#1f77b4']`:
 37 | 
 38 | ![Word Cloud Example](wordcloud-single-min.png)
 39 | 
 40 | Using single-hue color of your choice, e.g. `['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef']`:
 41 | 
 42 | ![Word Cloud Example](wordcloud-blue-min.png)
 43 | 
 44 | Code:
 45 | ```
 46 | <template>
 47 |   <div id="app">
 48 |       <wordcloud
 49 |       :data="defaultWords"
 50 |       nameKey="name"
 51 |       valueKey="value"
 52 |       :color="myColors"
 53 |       :showTooltip="true"
 54 |       :wordClick="wordClickHandler">
 55 |       </wordcloud>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script>
 60 | import wordcloud from 'vue-wordcloud'
 61 | 
 62 | export default {
 63 |   name: 'app',
 64 |   components: {
 65 |     wordcloud
 66 |   },
 67 |   methods: {
 68 |     wordClickHandler(name, value, vm) {
 69 |       console.log('wordClickHandler', name, value, vm);
 70 |     }
 71 |   },
 72 |   data() {
 73 |     return {
 74 |       myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
 75 |       defaultWords: [{
 76 |           "name": "Cat",
 77 |           "value": 26
 78 |         },
 79 |         {
 80 |           "name": "fish",
 81 |           "value": 19
 82 |         },
 83 |         {
 84 |           "name": "things",
 85 |           "value": 18
 86 |         },
 87 |         {
 88 |           "name": "look",
 89 |           "value": 16
 90 |         },
 91 |         {
 92 |           "name": "two",
 93 |           "value": 15
 94 |         },
 95 |         {
 96 |           "name": "fun",
 97 |           "value": 9
 98 |         },
 99 |         {
100 |           "name": "know",
101 |           "value": 9
102 |         },
103 |         {
104 |           "name": "good",
105 |           "value": 9
106 |         },
107 |         {
108 |           "name": "play",
109 |           "value": 6
110 |         }
111 |       ]
112 |     }
113 |   }
114 | }
115 | </script>
116 | ```
117 | 
118 | For using [D3 categorical color schemes](https://github.com/d3/d3-scale-chromatic#categorical):
119 | ```
120 | <template>
121 |   <div id="app">
122 |       <wordcloud
123 |       :data="defaultWords"
124 |       nameKey="name"
125 |       valueKey="value"
126 |       color="Accent">
127 |       </wordcloud>
128 |   </div>
129 | </template>
130 | ```
131 | 
132 | ### Options
133 | **选项**|**简介**|**默认值**|**说明**
134 | :-----:|:-----:|:-----:|:-----:
135 | data|词云文本数据|defaultWords|数据格式：数组。数组中每个元素是对象{ 词：数值 }
136 | nameKey|数据中表示要显示的词的字段名称|'name'|-
137 | valueKey|数据中表示词的权重的字段名称|'value'|-
138 | margin|图表外边矩|{top: 15, right: 15, bottom: 15, left: 15 }|-
139 | wordPadding|词间间距|3|-
140 | rotate|词的旋转角度|{from: -60, to: 60, numOfOrientation: 5 }|可设置角度范围及角度的个数
141 | spiral|词的布局方式|'archimedian'|可选择'archimedian'或'rectangular'
142 | fontScale|词的大小缩放比例|'sqrt'|可选择'sqrt'，'log'或'n'
143 | fontSize|词的字号范围| `[10, 80]`| [minSize, maxSize]
144 | font|词的字体名称，对应 `font-family` 的值 |"impact"|例如，衬线字体'serif'，非衬线字体'Arial'
145 | color|配色集合，可配置两种类型的值：String (D3 scheme name)，或 Array（自定义的颜色列表）|'Category10'|可采用D3内置的任意 Category 配色，或自定义的颜色列表；单色可通过传入只有一个颜色的数组实现，详见 [examples](https://github.com/feifang/vue-wordcloud#examples)
146 | showTooltip|显示 Tooltip|true| true/false; tooltip 的样式（如宽高、颜色等）可以通过 CSS 类 `div.tooltip` 配置
147 | wordClick|词的点击事件的回调函数|null|函数传入三个变量，第一个是点击的词 `text`，第二个是该词对应的权重 `value`，第三个是 Vue 实例 `vm`
148 | 
149 | 
150 | 
151 | ### Todo
152 | - minimize component
153 | - add formatter option for tooltip
154 | - support D3 V5
155 | 


--------------------------------------------------------------------------------
/src/components/WordCloud.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="wordCloud" v-resize="onResize"></div>
  3 | </template>
  4 | 
  5 | <script>
  6 | import * as d3 from 'd3'
  7 | import * as cloud from 'd3-cloud'
  8 | import * as d3ScaleChromatic from 'd3-scale-chromatic'
  9 | import resize from 'vue-resize-directive'
 10 | 
 11 | function throttle (method, context) {
 12 |   clearTimeout(method.tid)
 13 |   method.tid = setTimeout(function () {
 14 |     method.call(context)
 15 |   }, 200)
 16 | }
 17 | 
 18 | const directives = {
 19 |   resize
 20 | }
 21 | const props = {
 22 |   margin: {
 23 |     type: Object,
 24 |     default: function () {
 25 |       return {
 26 |         top: 15,
 27 |         right: 15,
 28 |         bottom: 15,
 29 |         left: 15
 30 |       }
 31 |     }
 32 |   },
 33 |   wordPadding: {
 34 |     type: Number,
 35 |     default: 3
 36 |   },
 37 |   rotate: {
 38 |     type: Object,
 39 |     default: function () {
 40 |       return {
 41 |         from: -60,
 42 |         to: 60,
 43 |         numOfOrientation: 5
 44 |       }
 45 |     }
 46 |   },
 47 |   spiral: { //  two built-in spirals: "archimedean" and "rectangular"
 48 |     type: String,
 49 |     default: 'archimedean'
 50 |   },
 51 |   fontScale: {
 52 |     type: String,
 53 |     default: 'sqrt'
 54 |   },
 55 |   font: {
 56 |     type: String,
 57 |     default: 'impact'
 58 |   },
 59 |   fontSize: {
 60 |     type: Array,
 61 |     default: function () {
 62 |       return [10, 80]
 63 |     }
 64 |   },
 65 |   color: {
 66 |     type: [String, Array], // using d3 color schemes or self defined colors
 67 |     default: 'Category10'
 68 |   },
 69 |   data: {
 70 |     type: Array,
 71 |     required: true
 72 |   },
 73 |   nameKey: {
 74 |     type: String,
 75 |     default: 'name'
 76 |   },
 77 |   valueKey: {
 78 |     type: String,
 79 |     default: 'value'
 80 |   },
 81 |   showTooltip: {
 82 |     type: Boolean,
 83 |     default: true
 84 |   },
 85 |   wordClick: {
 86 |     type: Function,
 87 |     default: null
 88 |   }
 89 | }
 90 | 
 91 | export default {
 92 |   name: 'word-cloud',
 93 |   directives,
 94 |   props,
 95 |   data () {
 96 |     return {
 97 |       svgWidth: 0,
 98 |       svgHeight: 0
 99 |     }
100 |   },
101 |   computed: {
102 |     size () {
103 |       const { svgWidth, svgHeight } = this
104 |       const { margin } = this
105 |       const width = svgWidth - margin.left - margin.right
106 |       const height = svgHeight - margin.top - margin.bottom
107 |       return { width, height }
108 |     },
109 |     words () { // sort data in desc order, so as to get the right fontScale
110 |       const { data, valueKey } = this
111 |       const words = data.sort(function (a, b) {
112 |         return parseFloat(b[valueKey]) - parseFloat(a[valueKey])
113 |       })
114 |       return words
115 |     }
116 |   },
117 |   mounted () {
118 |     this.getSize()
119 |     this.chart = this.createChart()
120 |     this.renderChart()
121 |   },
122 |   watch: {
123 |     words: {
124 |       handler: function (val, oldVal) {
125 |         this.update()
126 |       },
127 |       deep: true
128 |     }
129 |   },
130 |   methods: {
131 |     onResize () {
132 |       this.getSize()
133 |       throttle(this.update)
134 |     },
135 |     getSize () {
136 |       this.svgWidth = this.$el.clientWidth
137 |       this.svgHeight = this.$el.clientHeight
138 |     },
139 |     createSvg () {
140 |       const svg = d3.select(this.$el).append('svg')
141 |                       .attr('width', '100%')
142 |                       .attr('height', '100%')
143 |       return svg
144 |     },
145 |     createChart () {
146 |       const { margin } = this
147 |       const { width, height } = this.size
148 |       const svg = this.createSvg()
149 |       const chart = svg.append('g')
150 |                          .attr('width', width)
151 |                          .attr('height', height)
152 |                          .attr('class', 'chart')
153 |                          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
154 |       return chart
155 |     },
156 |     getRotation () {
157 |       const { from: x1, to: x2, numOfOrientation: n } = this.rotate
158 |       const multiplier = ((Math.abs(x1) + Math.abs(x2)) / (n - 1)) || 1
159 |       return { a: n, b: (x1 / multiplier), c: multiplier }
160 |     },
161 |     getColorScale(color) {
162 |       if (typeof color === 'string') { // d3 color schemes
163 |         return d3.scaleOrdinal(d3ScaleChromatic['scheme' + color])
164 |       } else {
165 |         return d3.scaleOrdinal(color) // self defined color list
166 |       }
167 |     },
168 |     setFontSizeScale () {
169 |       const { fontSize, fontScale, words, valueKey } = this
170 |       switch (fontScale) {
171 |         case 'sqrt':
172 |           this.fontSizeScale = d3.scaleSqrt()
173 |           break
174 |         case 'log':
175 |           this.fontSizeScale = d3.scaleLog()
176 |           break
177 |         case 'n':
178 |           this.fontSizeScale = d3.scaleLinear()
179 |           break
180 |         default:
181 |       }
182 |       this.fontSizeScale.range(fontSize)
183 |       if (words.length) {
184 |         this.fontSizeScale.domain([+words[words.length - 1][valueKey] || 1, +words[0][valueKey]])
185 |       }
186 |     },
187 |     renderChart () {
188 |       this.setFontSizeScale()
189 |       const { spiral, wordPadding, fontSizeScale, font, words, nameKey, valueKey } = this
190 |       const { width, height } = this.size
191 |       const { a, b, c } = this.getRotation()
192 |       const layout = cloud()
193 |               .size([width, height])
194 |               .words(words)
195 |               .fontSize(d => fontSizeScale(d[valueKey]))
196 |               .text(d => d[nameKey])
197 |               .font(font)
198 |               .padding(wordPadding)
199 |               .rotate(() => { return (~~(Math.random() * a) + b) * c })
200 |               .spiral(spiral)
201 |               .on('end', this.draw)
202 |       this.layout = layout
203 |       layout.start()
204 |     },
205 |     draw (data) {
206 |       const { layout, chart, color, nameKey, valueKey, showTooltip, wordClick } = this
207 |       const fill = this.getColorScale(color)
208 |       const vm = this
209 |       const centeredChart = chart.append('g')
210 |               .attr('transform', 'translate(' + layout.size()[0] / 2 + ',' + layout.size()[1] / 2 + ')')
211 |       // Define the div for the tooltip
212 |       const tooltip = d3.select("body").append("div")
213 |             .attr("class", "tooltip")
214 |             .style("opacity", 0);
215 |       const text = centeredChart.selectAll('text')
216 |               .data(data)
217 |            .enter().append('text')
218 |               .style('font-size', d => d.size + 'px')
219 |               .style('font-family', d => d.font)
220 |               .style('fill', (d, i) => fill(i))
221 |               .attr('class', 'text')
222 |               .attr('text-anchor', 'middle')
223 |       text.transition()
224 |               .duration(500)
225 |               .attr('transform', (d) => { return 'translate(' + [d.x, d.y] + ')rotate(' + d.rotate + ')' })
226 |               .text(d => d.text)
227 |       if (showTooltip) {
228 |         text.on("mouseover", function(d) {
229 |                 tooltip.transition()
230 |                     .duration(200)
231 |                     .style("opacity", .7)
232 |                 tooltip.html(nameKey + ': ' + d[nameKey] + "<br/>"  + valueKey + ': ' + d[valueKey])
233 |             })
234 |             .on("mousemove", function(d) {
235 |                 tooltip
236 |                     .style("left", (d3.event.pageX) + "px")
237 |                     .style("top", (d3.event.pageY - 40) + "px")
238 |             })
239 |             .on("mouseout", function(d) {
240 |                 tooltip.transition()
241 |                     .duration(500)
242 |                     .style("opacity", 0)
243 |         });
244 |       }
245 |       text.on('click', (d) => {
246 |         wordClick(d[nameKey], d[valueKey], vm)
247 |       })
248 |     },
249 |     update () {
250 |       const { words, layout, fontSizeScale, chart, valueKey } = this
251 |       const { width, height } = this.size
252 |       if (words.length) {
253 |         fontSizeScale.domain([+words[words.length - 1][valueKey] || 1, +words[0][valueKey]])
254 |       }
255 |       // clear chart
256 |       chart.select('g').remove()
257 |       layout.stop().size([width, height]).words(words).start()
258 |     }
259 |   }
260 | }
261 | </script>
262 | 
263 | 
264 | <style scope>
265 | .wordCloud {
266 |   display: inline-block;
267 |   position: relative;
268 |   width: 100%;
269 |   height: 400px;
270 | }
271 | .wordCloud svg {
272 |   display: inline-block;
273 |   position: absolute;
274 |   top: 0;
275 |   left: 0;
276 | }
277 | div.tooltip {
278 |     position: absolute;
279 |     width: 140px;
280 |     height: 50px;
281 |     padding: 8px;
282 |     font: 18px Arial;
283 |     line-height: 24px;
284 |     color: white;
285 |     background: black;
286 |     border: 0px;
287 |     border-radius: 2px;
288 |     pointer-events: none;
289 | }
290 | </style>
291 | 


--------------------------------------------------------------------------------