小编spa*_*run的帖子

在d3 wordcloud重叠

我使用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); }) …

Run Code Online (Sandbox Code Playgroud)

javascript overlap word-cloud d3.js

spa*_*run

lucky-day

8
推荐指数

1
解决办法

6101
查看次数