d3.js word missing from word cloud

Question

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?

Answer 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