5

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

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

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

然而，这绝不会影响字体的大小——这可能表示该国的土地面积。

我的问题是这些词都相互重叠。

我想知道我可能做错了什么-请参阅此代码-我的“绘图”功能。我在这里做错了什么？

    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; });
    }

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

谢谢你。

4

1 回答 1

5

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

似乎并非如此。所以我添加了旋转（0），就是这样。现在我得到了一个好看的词云。

提示：我使用 stroke: black 来衬托文本样式，这样可以提供简洁的展示效果。

于 2013-07-09T23:04:08.550 回答