How to make custom nodes in Infovis Toolkit?

Question

I've been working on a Infovis toolkit project and though all functionality is done I haven't been able to finish the visuals. The Infovis toolkit API documentation is good but my custom node types don't work. I'm using a hypertree and I want make two different custom node types. One that's from an image and the other as a drawn path. All help is greatly appreciated, thanks!

EDIT: [ The solution I was trying turned out to be not so handy. Instead I used onCreateLabel() from the JIT controllers to customize the nodes with HTML. Saw a clear improvement in performance and got much more flexibility in customizing the nodes. ]

This is what I've come up with so far:

$jit.Hypertree.Plot.NodeTypes.implement({  
    'customNode': {  
         'render': function(node, canvas) {
            var img = new Image();
            img.src = "../icon.png";
            var pos = node.pos.getc(true);
            var ctx = canvas.getCtx();

            ctx.drawImage(img, pos.x-15, pos.y-15);                 
            /*
            //...And an other one like this but drawn as a path
            ctx.beginPath();
            ctx.moveTo(pos.x-25, pos.y-15);
            ctx.lineTo(25, -15);
            ctx.lineTo(-35, 0);
            ctx.closePath();
            ctx.strokeStyle = "#fff";
            ctx.fillStyle = "#bf5fa4";
            ctx.fill();
            ctx.stroke();*/
        }
       }
});

Answer 1

Because you're setting the image src to a file URL, it takes time to load the file. So the code is hitting the drawImage call before the image has loaded.

You can get around this by modifying your code to run the drawImage call in the onload event handler for the image (which runs once the image has finished loading).

$jit.Hypertree.Plot.NodeTypes.implement({  
    'customNode': {  
        'render': function (node, canvas) {
            var img = new Image(),
                pos = node.pos.getc(true),
                ctx = canvas.getCtx();

            img.onload = function () {
                ctx.drawImage(img, pos.x - 15, pos.y - 15);
            };

            img.src = '../icon.png';
        }
    }
});