d3.js word missing from word cloud

问题

js and trying to do word cloud base on the sample code from [here]: https://github.com/jasondavies/d3-cloud. What i trying to do is the font size of the words is base on the frequency of the words in array. For example i have [a,a,a,b,b] so the word 'a' will be larger than 'b' but the problem is when the width or height of the word is larger than the <svg> the word will be gone.

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();

What i think of is get the width and height of the element first then adjust the wordSize accordingly but seems like i cant do that with [d3.layout.cloud.js]:https://github.com/jasondavies/d3-cloud/blob/master/d3.layout.cloud.js Can anyone help me with this?

回答1:

Scale the size preferably between 10 to 95 range. 95 because 100 was causing the biggest font to disappear and fonts smaller then 10 were too tiny

 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); })

Updated code at http://plnkr.co/edit/gNtHZ0lMRTP98mptm3W8?p=preview

来源：https://stackoverflow.com/questions/26471497/d3-js-word-missing-from-word-cloud

标签

javascript

svg

d3.js

word-cloud