D3词云 - 有太多的重叠发生

Question

我正在使用来自http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=cloud的d3示例来构建我的词云。

我所要做的就是根据单词所表示的对象的属性添加一些颜色属性。

例如，有4个单词-美国、印度、英国和德国-我使用阈值来设置单词的颜色-这更像是根据人口密度设置颜色。

但这并不以任何方式影响字体的大小-这可能表示国家的土地面积。

我的问题是所有单词都重叠在一起。

我想知道我可能做错了什么-请看这段代码-我的“draw”函数。我在这里可能做错了什么？

    draw: function(countries) {
        var cctrplt = {BuOrPuRd: {
            4: ["#9ebcda","#e32636","#08306b", "#ffbf00"]
        }};
        var fillthr = 
            d3.scale.threshold()
            .domain([2, 5, 10])
            .range(cctrplt.BuOrPuRd[4]);
        d3.select("#ddTagCloudContentRoot").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(300,300)")
            .selectAll("text")
            .data(countries)
            .enter().append("text")
            .style("font-size", function(d) { return (d.size) + "px"; })
            .style("font-family", "Impact")
            .style("fill", function(k,i) { var ccode = colours_list[k.text]; return fillthr(ccode); })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")";
            })
            .text(function(d) { return d.text; });
    }

如果我需要分享其他代码，请告诉我。谢谢。

- Ramkumar Devanathan

Answer 1

找到了解决方法。我没有使用rotate()函数调用，因为我想让文本水平放置。我以为完全不使用该调用会有所帮助。

但事实并非如此。所以我添加了rotate(0)，就这样。现在我得到了一个好看的词云。

提示：我使用stroke: black来对抗文本样式，并且这样可以呈现整洁漂亮的效果。

- Ramkumar Devanathan

---

哦，我的天啊，你刚刚为我节省了很多时间。拥有所有的赞。 - Doug Avery

我已经使用了rotate(0)，但没有帮助。 - dresh

@dresh 我认为rotate函数的参数必须是一个函数，例如.rotate(function() { return 0; })。 - Scott H