2

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 谁能帮我解决这个问题?

4

1 回答 1

3

缩放大小最好在 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更新代码

于 2014-12-27T00:35:57.707 回答