wordcloud2.js icon indicating copy to clipboard operation
wordcloud2.js copied to clipboard

Enhancement: allow fontWeight and fontFamily to be callbacks, too

Open rse opened this issue 10 years ago • 5 comments

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',

rse avatar Mar 23 '14 08:03 rse

Could you submit a pull request? Thanks.

timdream avatar Mar 24 '14 01:03 timdream

This was really useful, I added weight to functions but it saves me a lot of work! Thanks!

Redithion avatar Oct 08 '14 18:10 Redithion

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.

Sachin-DAI avatar Nov 11 '20 13:11 Sachin-DAI

Can you submit a pull request?

timdream avatar Nov 17 '20 06:11 timdream

Bumping this thread, @rse could you raise the pull request please?

roopeshshettyb avatar Jul 12 '22 06:07 roopeshshettyb