javascript - d3.js 缺少单词

Question

我正在使用 d3-cloud 来可视化一些单词。不幸的是，有一个问题:有时会丢失一个词。为了调查这个问题，我使用了相同的 10 个不同(但静态)大小的单词。当我加载或重新加载页面时，所有 10 个单词都会正确显示，直到丢失一个(似乎总是丢失相同的单词，但不是字体最大的那个)。 Canvas 应该足够大，因为在超过 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

我遇到过同样的问题。这真的完全取决于确保数组中的每个元素都适合 Canvas 的边界，并且对于某些需要对 w 和 h 值以及字体大小范围进行一些调整的数据集。就我而言，我不得不将范围从 [10,100] 减少到 [15,30]:

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

将 Canvas 大小设置为整个窗口宽度而不是 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>