Skip to content

Commit

Permalink
Fix feifang#5 extend color option to support custom color scale
Browse files Browse the repository at this point in the history
feifang committed Nov 25, 2018
1 parent 5ec1a33 commit c81fdb2
Showing 5 changed files with 22 additions and 5 deletions.
2 changes: 1 addition & 1 deletion dist/word-cloud.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/word-cloud.js.map

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@
"dependencies": {
"d3": "^4.10.0",
"d3-cloud": "^1.2.4",
"d3-scale-chromatic": "^1.3.3",
"vue": "^2.3.3",
"vue-resize-directive": "^1.0.0"
},
13 changes: 10 additions & 3 deletions src/components/WordCloud.vue
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
<script>
import * as d3 from 'd3'
import * as cloud from 'd3-cloud'
import * as d3ScaleChromatic from 'd3-scale-chromatic'
import resize from 'vue-resize-directive'
function throttle (method, context) {
@@ -62,7 +63,7 @@ const props = {
}
},
color: {
type: String,
type: [String, Array], // using d3 color schemes or self defined colors
default: 'Category20b'
},
data: {
@@ -157,6 +158,13 @@ export default {
const multiplier = ((Math.abs(x1) + Math.abs(x2)) / (n - 1)) || 1
return { a: n, b: (x1 / multiplier), c: multiplier }
},
getColorScale(color) {
if (typeof color === 'string') { // d3 color schemes
return d3.scaleOrdinal(d3ScaleChromatic['scheme' + color])
} else {
return d3.scaleOrdinal(color) // self defined color list
}
},
setFontSizeScale () {
const { fontSize, fontScale, words, valueKey } = this
switch (fontScale) {
@@ -196,8 +204,7 @@ export default {
},
draw (data) {
const { layout, chart, color, nameKey, valueKey, showTooltip, wordClick } = this
// const fill = d3.scaleOrdinal(colors['scheme' + color])
const fill = d3.scaleOrdinal(d3['scheme' + color])
const fill = this.getColorScale(color)
const vm = this
const centeredChart = chart.append('g')
.attr('transform', 'translate(' + layout.size()[0] / 2 + ',' + layout.size()[1] / 2 + ')')

0 comments on commit c81fdb2

Please sign in to comment.