Once I have my data to display, I normalise each size value with something like this:

newValue = (oldValue - min ) / (max - min) * (maxFontSize - minFontSize) + minFontSize

Obviously you need to find your max/min values for each dataset you want to display.

from wordcloud2.js.

or a method to proportionally size the words working backwards from the largest word?

This is a very hard problem. With enough time I can definitely improve the script to do so, but I don't, unfortunately.

Is there an option to make sure no word grows so large it can't be displayed

The problem is we don't really know the biggest the size of the word that would fit either. So we would have to go to the first solution eventually.

from wordcloud2.js.

This is considered fixed when you set the new option drawOutOfBound to true.

from wordcloud2.js.

I know that this is a closed issue, but I'm having the same problem.
When I tried to use drawOutOfBound: true in combination with weightFactor (for example: weightFactor: 0.9) the drawOutOfBound is ignored, meaning that I'm having words that are not displayed in the cloud. Do I use the weightFactor parameter wrong?

from wordcloud2.js.

I know that this is a closed issue, but I'm having the same problem.
When I tried to use drawOutOfBound: true in combination with weightFactor (for example: weightFactor: 0.9) the drawOutOfBound is ignored, meaning that I'm having words that are not displayed in the cloud. Do I use the weightFactor parameter wrong?

Should not be related... please create a new issue for that and paste the options on the issue.

from wordcloud2.js.

I give the small font-size, the words show.But I found out that the official website examples have words show even though it gives a font-size 30.

from wordcloud2.js.

I fixed it in my own way, it works good to me.

About weightFactor

Read the source code, the rendering font size is:

fontSize = wordWeight * weightFactor
//wordWeight = the value of the word (I'll call it Value below)
fontSize = value * weightFactor  

so we can do something limit the biggest font size:

1. Find the word with max value, let's call it maxWord.
2. In some case, every letter is square, same height & width, like CJK.
   If we want the maxWord width = canvas short edge, the font size of the maxWord should be:

   fontSize = shortEdge / word.length
   

3. So, we can get:

   weightFactor = shortEdge / value / word.length  
   

4. Add a fontSizeRatio to control the width.

   weightFactor = shortEdge / value / word.length * fontSizeRatio  
   

   In square letter, if you wish the maxWord's width is half of edge, fontSizeRatio = 0.5.
   In case you use font family like Impact, a narrow width font, maybe the fontSizeRatio = 2.

Code

My data source is a json file, with the format below:

{"word1": 999,
"word2": 321,
...}

Javascript (I am not familiar with js)

    <script>
    // set canvas size as container
    var c = $("#wordCloud"),
        ctx = c[0].getContext('2d');
    cw = $('#canvas-container').width()
    ch = $('#canvas-container').height()
    ctx.canvas.width = cw;
    ctx.canvas.height = ch;
    // load data
    $.getJSON("test2.min.json", function(json) {
        // format data
        var data = [];
        var max = 0;
        var shortEdge = Math.min(cw, ch)
        var wf = 999  // weightFactor
        for (var word in json) {
            //缩小数据差异
            var scaleData = 0.4  // 1:不变, <1:缩小差异, >1:放大差异
            var v = Math.round(Math.pow(json[word], scaleData))
            data.push([word, v])
            // 获取weightFactor
            var fontSizeRatio = 0.5  // 1:与短边同宽(方块字)
            if (v >= max) {
                max = v;
                // 相同v，但word字数可能不同，取最长，也就是最小字号。
                wf = Math.min(wf, shortEdge / v / word.length * fontSizeRatio)
            }
        }
        console.log(max, data);
        var options = eval({
            // Presentation
            'list': data,
            // 'fontFamily': '★風雲',
            'fontFamily': 'source han pro black, sans-serif',
            'fontWeight': 900, // 'normal', 'bold' or a callback
            'color': function(word, weight) {
                return 'hsl(' +
                    (Math.round(Math.random() * 0) + 0) + ',' +
                    (Math.round(Math.random() * 0) + 90) + '%,' +
                    (Math.round(Math.random() * 0.6) * 50 + 0) + '%)'
            }, // 'random-dark' or 'random-light'
            // 'class': 'test',
            'minSize': 12, // 隐藏低于这个的值
            'weightFactor': wf,
            'backgroundColor': '#FFF', // the color of canvas
            // Dimension
            'gridSize': 10, // 间隔距离
            // 'origin': [500,100], // 原点
            // 'drawOutOfBound': true,
            //Rotate
            'minRotation': Math.PI / 18, // 默认值正负Math.PI/2
            'maxRotation': Math.PI / 18,
            'rotationSteps': 5, // n-1方向 5=4方向
            // 'shuffle':true,
            'rotateRatio': 1, // probability for the word to rotate. 1 means always rotate
            // Shape
            'shape': 'square',
        });
        var canvas = document.getElementById('wordCloud');
        WordCloud(canvas, options);
    });
    </script>

PS: 我还有改一个部分，是关于 minSize，这部分直接改了源码。

            if (fontSize <= settings.minSize) {
                fontSize = settings.minSize // Erimus
                // return false;
            }

因为这部分，我觉得可以考虑加一个参数，让用户选择小于minSize是隐藏还是保持，我比较倾向于保持。
但毕竟我非常不熟悉js，所有语法都是一边google一边改的，所以就不提PR了。
作者如果方便，可以考虑下。

另外我还在考虑一个算法，关于如何控制字号或其它参数，让数据刚好填满图形区域。

from wordcloud2.js.

另外，即便设置了'drawOutOfBound': false，仍然有部分字体会超出canvas边界一点点（可能是字体本身问题/或者倾斜角）。
虽然可能可以用mask来限制范围，但如果有一个padding设置，应该更好一些。
比如把现在的origin参数，改成range:[x1,y1,x2,y2]。

from wordcloud2.js.