在d3 wordcloud重叠

Question

我使用Jason Davies的wordcloud库来获取d3(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>

testdata看起来像这样(示例中没有使用颜色信息):

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脚本,我的文字云会出现重叠.有时它只会在重新加载后发生,但它是相当频繁的.

其他人报告了同样的问题,发现它与使用Web字体或跳过rotate参数有关.这不适用于我的示例.

我怀疑它可能与帆布尺寸有很多单词这一事实有关,但是,我也做过测试,其中我显着增加了画布尺寸并且它仍然发生(虽然不常见,因为随机放置的单词使它不太可能).除此之外,由于画布尺寸较小,您可以看到几个单词都没有显示.为什么要留下一些并为其他人创造重叠？所以我认为问题出在其他地方.

有任何想法吗？

谢谢!

Answer 1

我最后问了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();