d3单词clouds-出现了太多的重叠

d3 word clouds - too much overlaps occurring

本文关键字：太多 重叠 单词 clouds- d3      更新时间：2023-09-26

我使用的是http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fen.wikipedia.org%2Fwiki%2F%7Bword%7D=cloud建立我自己的单词云。

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

例如，有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; });
    }

如果有任何其他代码我需要分享-让我知道。

谢谢。

找到了解决方案。我没有使用rotate（）函数调用，因为我希望文本水平放置。我想完全不打电话会有帮助。

情况似乎并非如此。所以我加了rotate（0），就这样了。现在我得到了一个好看的单词cloud。

提示：我在文本样式中使用了stroke:black，这会给出一个整洁的演示。

相关文章：