|
|
@ -31,6 +31,7 @@ class TagCloud extends Component { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
componentWillUnmount() { |
|
|
componentWillUnmount() { |
|
|
|
|
|
this.isUnmount = true; |
|
|
window.removeEventListener('resize', this.resize); |
|
|
window.removeEventListener('resize', this.resize); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -87,18 +88,14 @@ class TagCloud extends Component { |
|
|
const h = height * 4; |
|
|
const h = height * 4; |
|
|
const w = this.root.offsetWidth * 4; |
|
|
const w = this.root.offsetWidth * 4; |
|
|
|
|
|
|
|
|
const imageMask = new Image(); |
|
|
const onload = () => { |
|
|
imageMask.crossOrigin = ''; |
|
|
|
|
|
imageMask.src = imgUrl; |
|
|
|
|
|
|
|
|
|
|
|
imageMask.onload = () => { |
|
|
|
|
|
const dv = new DataSet.View().source(data); |
|
|
const dv = new DataSet.View().source(data); |
|
|
const range = dv.range('value'); |
|
|
const range = dv.range('value'); |
|
|
const [min, max] = range; |
|
|
const [min, max] = range; |
|
|
dv.transform({ |
|
|
dv.transform({ |
|
|
type: 'tag-cloud', |
|
|
type: 'tag-cloud', |
|
|
fields: ['name', 'value'], |
|
|
fields: ['name', 'value'], |
|
|
imageMask, |
|
|
imageMask: this.imageMask, |
|
|
font: 'Verdana', |
|
|
font: 'Verdana', |
|
|
size: [w, h], // 宽高设置最好根据 imageMask 做调整
|
|
|
size: [w, h], // 宽高设置最好根据 imageMask 做调整
|
|
|
padding: 5, |
|
|
padding: 5, |
|
|
@ -112,12 +109,26 @@ class TagCloud extends Component { |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if (this.isUnmount) { |
|
|
|
|
|
return; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this.setState({ |
|
|
this.setState({ |
|
|
dv, |
|
|
dv, |
|
|
w, |
|
|
w, |
|
|
h, |
|
|
h, |
|
|
}); |
|
|
}); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
if (!this.imageMask) { |
|
|
|
|
|
this.imageMask = new Image(); |
|
|
|
|
|
this.imageMask.crossOrigin = ''; |
|
|
|
|
|
this.imageMask.src = imgUrl; |
|
|
|
|
|
|
|
|
|
|
|
this.imageMask.onload = onload; |
|
|
|
|
|
} else { |
|
|
|
|
|
onload(); |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
render() { |
|
|
render() { |
|
|
|