Problem with svg support using node.js

[tomas-lumi]

I have problems using the d3-cloud/examples/node.js example and creating an svg canvas. It crashes with a 'Segmentation fault: 11' error. It works with png and the canvas module also works with svg examples so my guess is that the bug is in d3-cloud.

Test code:

var Canvas = require("canvas");
var fs = require('fs');

var cloud = require("../");

var words = ["Hello", "world", "normally", "you", "want", "more", "words", "than", "this"]
    .map(function(d) {
      return {text: d, size: 10 + Math.random() * 90};
    });

var canvas = new Canvas(960, 500, 'svg');

cloud().size([960, 500])
    .canvas(function() { return canvas; })
    .words(words)
    .padding(5)
    .rotate(function() { return ~~(Math.random() * 2) * 90; })
    .font("Arial")
    .fontSize(function(d) { return d.size; })
    .on("end", end)
    .start();

function end(words) { 
    fs.writeFile('out.svg', canvas.toBuffer()); 
} 

[jasondavies]

Two things:

• The segfault bug is in node-canvas, see here: Automattic/node-canvas#772.
• You're using d3-cloud incorrectly: the canvas must be a pixel-based canvas so that it can do collision detection. However, the canvas is not used to render the word cloud; the final "end" event provides an array of words with their positions and sizes, and that's where you could render it to SVG if you wanted to.

[tomas-lumi]

Thanks for the help, much appreciated. I'm still having problems though, generating the cloud works fine but I get collisions even with small amounts of words. Can you see what I'm doing wrong?

Test code:

var Canvas = require("canvas");
var fs = require('fs');

var cloud = require("../");
var words = ["Hello","world","normally","you","want","more","words","than","this"]
    .map(function(d) {
        return {text: d, size: 10 + Math.random() * 90};
    });

var layout = cloud()
    .timeInterval(10)
    .size([640, 480])
    .canvas(function() { return new Canvas(1, 1); })
    .rotate(0)
    .font("Arial")
    .fontSize(function(d) { return d.size; })
    .on("end", end);

layout.stop().words(words).start();

function end(words, bounds) { 
    var w = bounds[1].x;
    var h = bounds[1].y;

    var canvas = new Canvas(w, h, 'svg');
    var ctx = canvas.getContext('2d');
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    for (var i=0; i < words.length; i++) {
        var word = words[i];
        ctx.font = word.size+'px '+word.font;
        var m = ctx.measureText(word.text);
        ctx.fillText(word.text, (w/2)+word.x, (h/2)+word.y);
    }
    fs.writeFile('out.svg', canvas.toBuffer()); 
}

[toe-pyae-sone-oo]

Why do you add (w/2) and (h/2) in width and height in ctx.fillText(...)?