d3.js 缺少单词答案

【问题标题】：d3.js is missing wordsd3.js 缺少单词
【发布时间】：2015-09-29 15:09:03
【问题描述】：

我正在使用 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，但解决方案是限制字体的大小（在我的情况下显示最大的字体）或增加可见区域。但这并不能解决我的问题。有人可以帮忙吗？

【问题讨论】：

标签： javascript d3.js

【解决方案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>

【讨论】：