我将 Jason Davies 的 wordcloud 库用于 d3 ( https://github.com/jasondavies/d3-cloud )，我的问题是云中的单词重叠。
我知道在堆栈溢出(和其他网站)上已经有关于这个问题的问题，但这些对我的情况都没有帮助。
在下面的示例中，我使用了来自 Jason Davies 网站的示例云，并且只做了一些改动:
- 我从外部文件中读取我的文字及其大小。
- 我将旋转设置为 0。不过旋转 Angular 似乎没有什么不同。
- 我注释掉了“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 脚本，我的词云会出现重叠。有时它只在几次重新加载后发生，但它相当频繁。
其他人反射(reflect)了同样的问题，发现它与使用网络字体或跳过旋转参数有关。这不适用于我的示例。
我怀疑这可能与 Canvas 大小有很多词有关，但是，我也做了测试，我显着增加了 Canvas 大小，但它仍然发生(尽管频率较低，因为随机放置这些词使它不太可能)。除此之外，您还可以看到由于 Canvas 尺寸太小，有几个词根本没有显示出来。为什么要遗漏一些并为其他人创造重叠？所以我认为问题出在其他地方。
有什么想法吗？
谢谢!
最佳答案
我最后问了 Jason Davies 本人，这实际上是一个非常简单的错误:您必须在第一条语句中指定文本访问器函数(不仅在“draw”函数中)。如果您像这样添加一行，它就会起作用:
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();
关于javascript - 在 d3 wordcloud 中重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23569556/