javascript - 词云中缺少 d3.js 词

Question

js 并尝试根据 [这里] 中的示例代码来做词云:https://github.com/jasondavies/d3-cloud .我想做的是单词的字体大小是基于数组中单词的频率。例如我有 [a,a,a,b,b] 所以单词 'a' 将大于 'b' 但问题是当单词的宽度或高度大于 <svg> 这个词会消失。

layout = d3.layout.cloud().size([w, h])
    .words(frequency_list)
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font(d3.select("#font").property("value"))
    .fontSize(function(d) { return (d.freq*wordSize); })
    .spiral(d3.select("input[name=spiral]:checked").property("value"))
    .on("end",draw)
    .start();    

我想到的是先获取元素的宽度和高度，然后相应地调整 wordSize，但似乎我不能用 [d3.layout.cloud.js] 做到这一点:https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js谁能帮我解决这个问题？

Answer 1

缩放的大小最好在10到95之间的范围内。 95 因为 100 导致最大的字体消失，而小于 10 的字体太小了

 var sizeScale = d3.scale.linear()
                   .domain([0, d3.max(frequency_list, function(d) { return d.freq} )])
                                    .range([10, 95]); // 95 because 100 was causing stuff to be missing

...

    .fontSize(function(d) { return sizeScale(d.freq); })

更新代码在 http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview