I am encountering an issue while trying to create a keyword cloud using d3 and d3-cloud. The problem I am facing is that the words in the cloud are overlapping, and I cannot figure out the exact reason behind it. I suspect it might be related to the fontSize parameter, but I have not been able to pinpoint the exact cause. You can view a screenshot of the issue here
Below are the methods I am using:
private _populate(keyword: any) {
const dataset = kw.map(function (d: any) { return { text: d.text, size: d.value }; });
console.log(dataset);
d3.layout.cloud()
.size([this._width, this._height])
.words(dataset)
.padding(1)
.rotate(0)
.fontSize((d: any) => d.size / 100)
.on('end', () => {
this._drawWordCloud(dataset);
})
.start();
}
private _drawWordCloud(words: any) {
this._svg
.append("g")
.attr("transform", "translate(" + this._width / 2 + "," + this._height / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", (d: any) => d.size + "px")
.style("fill", "#69b3a2")
.style("font-family", "Impact")
.attr("text-anchor", "middle")
.attr("transform", (d: any) => "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")")
.text((d: any) => d.text);
}
.fontSize((d: any) => d.size / 100) is used because my values are quite high (~ 10000).
If anyone could provide some guidance or assistance on resolving this issue, it would be greatly appreciated. I have tried a few solutions without success.
Thank you!