wordcloud2.js
wordcloud2.js copied to clipboard
Enhancement: allow fontWeight and fontFamily to be callbacks, too
I wanted to render a wordcloud where the words use different(!) font families and weights. This is not supported, but can easily be supported similar to the way the individual coloring is supported: with the help of callback functions. Find below my enhancement which does exactly this (only documentation update missing, but code is complete):
--- bower_components/wordcloud2.js/src/wordcloud2.js 2014-03-22 19:06:16.000000000 +0100 +++ lib/wordcloud2/wordcloud2.js 2014-03-23 09:02:47.811057186 +0100 @@ -342,6 +342,26 @@ break; } + /* convert fontFamily into a function */ + if (typeof settings.fontFamily !== 'function') { + (function () { + var value = settings.fontFamily; + settings.fontFamily = function fontFamily(word) { + return value; + }; + })(); + } + + /* convert fontWeight into a function */ + if (typeof settings.fontWeight !== 'function') { + (function () { + var value = settings.fontWeight; + settings.fontWeight = function fontWeight(word) { + return value; + }; + })(); + } + /* Interactive */ var interactive = false; var infoGrid = []; @@ -465,7 +491,7 @@ var fcanvas = document.createElement('canvas'); var fctx = fcanvas.getContext('2d', { willReadFrequently: true }); - fctx.font = settings.fontWeight + ' ' + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily; + fctx.font = settings.fontWeight(word) + ' ' + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily(word); // Estimate the dimension of the text with measureText(). var fw = fctx.measureText(word).width / mu; @@ -514,7 +540,7 @@ // Once the width/height is set, ctx info will be reset. // Set it again here. - fctx.font = settings.fontWeight + ' ' + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily; + fctx.font = settings.fontWeight(word) + ' ' + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily(word); // Fill the text into the fcanvas. // XXX: We cannot because textBaseline = 'top' here because @@ -646,8 +672,8 @@ ctx.save(); ctx.scale(1 / mu, 1 / mu); - ctx.font = settings.fontWeight + ' ' + - (fontSize * mu).toString(10) + 'px ' + settings.fontFamily; + ctx.font = settings.fontWeight(word) + ' ' + + (fontSize * mu).toString(10) + 'px ' + settings.fontFamily(word); ctx.fillStyle = color; // Translate the canvas position to the origin coordinate of where @@ -689,8 +715,8 @@ var styleRules = { 'position': 'absolute', 'display': 'block', - 'font': settings.fontWeight + ' ' + - (fontSize * info.mu) + 'px ' + settings.fontFamily, + 'font': settings.fontWeight(word) + ' ' + + (fontSize * info.mu) + 'px ' + settings.fontFamily(word), 'left': ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px', 'top': ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px', 'width': info.fillTextWidth + 'px',
Could you submit a pull request? Thanks.
This was really useful, I added weight to functions but it saves me a lot of work! Thanks!
Can this feature be merged into main branch if the fix given is apt? or does it require something more? This feature is very much needed for customization.
Can you submit a pull request?
Bumping this thread, @rse could you raise the pull request please?