我使用 Jason Davies 的 d3 wordcloud 库（https://github.com/jasondavies/d3-cloud），我的问题是云中的单词重叠。
我知道在堆栈溢出（和其他站点）上已经存在关于此问题的问题，但这些对我的情况都没有帮助。
在下面的示例中，我使用来自 Jason Davies 站点的示例云，并且只更改了一些内容：
- 我从外部文件中读取了我的单词及其大小。
- 我将旋转设置为 0。但旋转角度似乎没有什么不同。
- 我注释掉了“Impact”字体，以排除加载字体的任何问题。（不过也没什么区别。）
这是我的代码：
<!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>
测试数据如下所示（示例中未使用颜色信息）：
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
如果我用测试数据运行 js 脚本，我的词云就会出现重叠。有时它只在几次重新加载后才会发生，但它相当频繁。
其他人报告了同样的问题，发现它与使用网络字体或跳过旋转参数有关。这不适用于我的示例。
我怀疑这可能与画布大小有很多单词有关，但是，我也做了一些测试，我显着增加了画布大小并且它仍然发生（虽然不太频繁，因为单词的随机放置降低了可能性）。除此之外，您可以看到由于画布尺寸较小，根本没有显示几个单词。为什么要留下一些并为其他人创造重叠？所以我认为问题出在其他地方。
有任何想法吗？
谢谢！