d3.js缺少单词

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>