Overlap in d3 wordcloud
I use Jason Davies' wordcloud library for d3 (https://github.com/jasondavies/d3-cloud) and my problem is that the words in the cloud overlap.
I am aware that there are already questions regarding this issue on stack overflow (and other sites), but none of these helped in my case.
In the following example I use the example cloud from Jason Davies' site and altered only a few things:
- I read my words and their sizes from an external file.
- I set rotation to 0. Rotation angle does not seem to make a difference though.
- I commented out the "Impact" font, to rule out any issues with loading the font. (It makes no difference either though.)
Here is my code:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.js"></script>
<script src="d3.layout.cloud.js"></script>
<script>
d3.tsv("testdata.txt",
function(error, data) {
var fill = d3.scale.category20();
d3.layout.cloud().size([300, 300])
.words(data)
.padding(1)
.rotate(function(d) { return 0; })
// .font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", 300)
.attr("height", 300)
.append("g")
.attr("transform", "translate(150,150)")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
// .style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.word; });
}
}
)
</script>
The testdata looks like this (the color information is not used in the example):
word size color
der 39 #a9a9a9
die 37 #a9a9a9
und 30 #a9a9a9
athenischen 29 #a9a9a9
Die 29 #a9a9a9
eine 28 #a9a9a9
, 27 #a9a9a9
einer 26 #a9a9a9
attischen 26 #a9a9a9
liberalen 26 #1e90ff
zur 25 #a9a9a9
athenische 24 #a9a9a9
christliche 23 #a9a9a9
attische 23 #a9a9a9
_START_ 22 #a9a9a9
reinen 22 #a9a9a9
englischen 21 #a9a9a9
oder 21 #a9a9a9
-- 21 #a9a9a9
radikalen 21 #a9a9a9
Q*M 21 #a9a9a9
Q*M 21 #a9a9a9
christlichen 20 #a9a9a9
schöne 20 #1e90ff
repräsentativen 20 #a9a9a9
sozialen 20 #a9a9a9
hellenische 19 #1e90ff
modernen 19 #a9a9a9
radikale 19 #a9a9a9
griechische 19 #a9a9a9
- 18 #a9a9a9
schönen 18 #1e90ff
alle 18 #a9a9a9
radicalen 18 #a9a9a9
als 17 #a9a9a9
neuen 17 #a9a9a9
perikleischen 16 #a9a9a9
bürgerlichen 16 #a9a9a9
Namen 16 #1e90ff
If I run the js script with the test data my word cloud comes out with overlaps. Sometimes it only happens after a few reloads, but it is fairly frequent.
Other people reported the same issue and found that it was related to using web fonts or skipping the rotate parameter. This does not apply in my example.
I suspect that it might be related to the fact that there are to many words for the canvas size, however, I also did tests where I signficantly increased the canvas size and it still happened (though less frequently, as the random placement of the words made it less likely). In addition to that, you can see that several words are not shown at all due to the small canvas size. Why leave some out and create overlap for others? So I think the issue lies elsewhere.
Any ideas?
Thanks!
Answer
I ended up asking Jason Davies himself and it was actually a pretty simple mistake: You have to specify the text accessor function in the first statement (not only in the "draw" function). It works if you add one line like this:
d3.layout.cloud().size([300, 300])
.words(data)
.padding(1)
.rotate(function(d) { return 0; })
// .font("Impact")
.text(function(d) { return d.word; }) // THE SOLUTION
.fontSize(function(d) { return d.size; })
.on("end", draw)
.start();