diff --git a/API.md b/API.md index 9cd45ab..c19fb77 100644 --- a/API.md +++ b/API.md @@ -47,15 +47,15 @@ Available options as the property of the `options` object are: * `list`: List of words/text to paint on the canvas in a 2-d array, in the form of `[word, size]`. * e.g. `[['foo', 12], ['bar', 6]]` - * Optionally, you can send additional data as array elements, in the form of `[word, size, data1, data2, ... ]` which can then be used in the callback functions of `click` and `hover` interactions. + * Optionally, you can send additional data as array elements, in the form of `[word, size, data1, data2, ... ]` which can then be used in the callback functions of `click`, `hover` interactions and fontWeight, color and classes callbacks. * e.g. `[['foo', 12, 'http://google.com?q=foo'], ['bar', 6, 'http://google.com?q=bar']]`. * `fontFamily`: font to use. -* `fontWeight`: font weight to use, can be, as an example, `normal`, `bold` or `600` or a `callback(word, weight, fontSize)` specifies different font-weight for each item in the list. +* `fontWeight`: font weight to use, can be, as an example, `normal`, `bold` or `600` or a `callback(word, weight, fontSize, extraData)` specifies different font-weight for each item in the list. * `color`: color of the text, can be any CSS color, or a `callback(word, weight, fontSize, distance, theta)` specifies different color for each item in the list. You may also specify colors with built-in keywords: `random-dark` and `random-light`. If this is a DOM cloud, color can also be `null` to disable hardcoding of color into span elements (allowing you to customize at the class level). * `classes`: for DOM clouds, allows the user to define the class of the span elements. Can be a normal class string, - applying the same class to every span or a `callback(word, weight, fontSize, distance, theta)` for per-span class definition. + applying the same class to every span or a `callback(word, weight, fontSize, extraData)` for per-span class definition. In canvas clouds or if equals `null`, this option has no effect. * `minSize`: minimum font size to draw on the canvas. * `weightFactor`: function to call or number to multiply for `size` of each word in the list. diff --git a/src/wordcloud2.js b/src/wordcloud2.js index 04bba7e..c81f861 100644 --- a/src/wordcloud2.js +++ b/src/wordcloud2.js @@ -146,6 +146,17 @@ if (!window.clearImmediate) { return 0 })() + var getItemExtraData = function (item) { + if (Array.isArray(item)) { + var itemCopy = item.slice() + // remove data we already have (word and weight) + itemCopy.splice(0, 2) + return itemCopy + } else { + return [] + } + } + // Based on http://jsfromhell.com/array/shuffle var shuffleArray = function shuffleArray (arr) { for (var j, x, i = arr.length; i;) { @@ -507,7 +518,7 @@ if (!window.clearImmediate) { } } - var getTextInfo = function getTextInfo (word, weight, rotateDeg) { + var getTextInfo = function getTextInfo (word, weight, rotateDeg, extraDataArray) { // calculate the acutal font size // fontSize === 0 means weightFactor function wants the text skipped, // and size < minSize means we cannot draw the text. @@ -534,7 +545,7 @@ if (!window.clearImmediate) { // Get fontWeight that will be used to set fctx.font var fontWeight if (getTextFontWeight) { - fontWeight = getTextFontWeight(word, weight, fontSize) + fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray) } else { fontWeight = settings.fontWeight } @@ -722,11 +733,11 @@ if (!window.clearImmediate) { } /* Actually draw the text on the grid */ - var drawText = function drawText (gx, gy, info, word, weight, distance, theta, rotateDeg, attributes) { + var drawText = function drawText (gx, gy, info, word, weight, distance, theta, rotateDeg, attributes, extraDataArray) { var fontSize = info.fontSize var color if (getTextColor) { - color = getTextColor(word, weight, fontSize, distance, theta) + color = getTextColor(word, weight, fontSize, distance, theta, extraDataArray) } else { color = settings.color } @@ -734,14 +745,14 @@ if (!window.clearImmediate) { // get fontWeight that will be used to set ctx.font and font style rule var fontWeight if (getTextFontWeight) { - fontWeight = getTextFontWeight(word, weight, fontSize) + fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray) } else { fontWeight = settings.fontWeight } var classes if (getTextClasses) { - classes = getTextClasses(word, weight, fontSize) + classes = getTextClasses(word, weight, fontSize, extraDataArray) } else { classes = settings.classes } @@ -910,8 +921,10 @@ if (!window.clearImmediate) { } var rotateDeg = getRotateDeg() + var extraDataArray = getItemExtraData(item) + // get info needed to put the text onto the canvas - var info = getTextInfo(word, weight, rotateDeg) + var info = getTextInfo(word, weight, rotateDeg, extraDataArray) // not getting the info means we shouldn't be drawing this one. if (!info) { @@ -951,7 +964,7 @@ if (!window.clearImmediate) { // Actually put the text on the canvas drawText(gx, gy, info, word, weight, - (maxRadius - r), gxy[2], rotateDeg, attributes) + (maxRadius - r), gxy[2], rotateDeg, attributes, extraDataArray) // Mark the spaces on the grid as filled updateGrid(gx, gy, gw, gh, info, item)