Question

我正在使用d3-cloud来显示某些单词。不幸的是，有一个问题：有时候缺少一个词。为了研究这个问题，我使用了不同（但是静态）大小的相同10个单词。当我加载或重新加载页面时，所有10个单词都会正确显示，直到缺少一个单词（似乎总是缺少相同的单词，但不会丢失具有最大字体的单词）。画布应该足够大，超过95％它正确显示，当单词缺失时，似乎有一个足够大的区域来容纳缺失的单词。

d3.layout.cloud().size([w, h])
.words(wordList)
.rotate(function() { return (0);})
.fontSize(function(d) { return fontSize(+d.size); })
.on("end", draw)
.start();
function draw(words) {
d3.select("."+element).remove();
d3.select("#"+element).append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("class", element)
    .append("g")
        .attr("transform", "translate(" + w/2 + "," + h/2 + ")")
        .selectAll("text")
            .data(words)
            .enter().append("text")
                .style("font-size", function(d) { return (d.size - 5) + "px"; })
                .style("fill", function(d, i) { return fillColor(d,i); })
                .attr("text-anchor", "middle")
                .attr("transform", function(d) {
                    return "translate(" + [ d.x, d.y] + ")rotate(" + d.rotate + ")"
                })
                .text(function(d) { return d.text; });

我检查了d3.js word missing from word cloud之类的其他问题，但解决方法是限制字体大小（在我的情况下显示最大字体）或增加可见区域。但这并不能解决我的问题。有人可以帮忙吗？

Answer 1

我有同样的问题。实际上，要确保数组中的每个元素都适合画布的边界，对于某些需要对w和h值以及字体大小范围进行一些调整的数据集，这完全是必须的。就我而言，我不得不将范围从[10,100]减小到[15,30]：

fontSize = d3.scale["sqrt"]().range([15, 30]);

将画布大小设置为整个窗口宽度，而不是div：

  //    var w = $("#wordcloud").innerWidth(),
 //     h = $("#wordcloud").innerHeight();
        var w = window.innerWidth,
        h = window.innerHeight;

并将div大小设置为大于svg（1280 x 480）

<style>
          #wordcloud {
            width: 1300px;
            height: 500px;
          }
</style>

d3.js缺少单词

1 个答案: