我使用Jason Davies的d3词云库(https://github.com/jasondavies/d3-cloud),但我的问题是云中的单词重叠。
我知道在stackoverflow(和其他网站)上已经有了关于这个问题的问题,但这些问题都没有对我的情况有所帮助。
在下面的例子中,我使用了Jason Davies网站上的示例云,并仅改变了一些内容:
测试数据如下(颜色信息在示例中未被使用):
如果我用测试数据运行js脚本,我的词云会出现重叠。有时候只是在几次重新加载之后才会发生,但这是相当频繁的。
其他人报告了同样的问题,并发现这与使用网络字体或跳过旋转参数有关。但这不适用于我的例子。
我怀疑这可能与画布大小和单词数量有关,但我也做了一些测试,明显增加了画布大小,它仍然发生(尽管不太频繁,因为单词的随机放置使其不太可能)。除此之外,您可以看到由于画布大小的限制,有几个单词根本没有显示。为什么要遗漏一些单词以及给其他单词造成重叠呢?所以我认为问题出在其他地方。
有任何想法吗?
谢谢!
我知道在stackoverflow(和其他网站)上已经有了关于这个问题的问题,但这些问题都没有对我的情况有所帮助。
在下面的例子中,我使用了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脚本,我的词云会出现重叠。有时候只是在几次重新加载之后才会发生,但这是相当频繁的。
其他人报告了同样的问题,并发现这与使用网络字体或跳过旋转参数有关。但这不适用于我的例子。
我怀疑这可能与画布大小和单词数量有关,但我也做了一些测试,明显增加了画布大小,它仍然发生(尽管不太频繁,因为单词的随机放置使其不太可能)。除此之外,您可以看到由于画布大小的限制,有几个单词根本没有显示。为什么要遗漏一些单词以及给其他单词造成重叠呢?所以我认为问题出在其他地方。
有任何想法吗?
谢谢!