How to add css style to custom image node in JavaScript InfoVis ToolKit

Question

I have created custom nodes for my force directed InfoVis graph in which I display a user's image. I want to now add style to the image, such as adding a border and making it a circle. I tried adding css class as follows, but it's not working.

 img.className = myClass;

here's my custom node code:

    //Custom nodes
$jit.ForceDirected.Plot.NodeTypes.implement({
    'customImage':
        {
            'render': function (node, canvas)
            {
                var ctx = canvas.getCtx();
                var img = new Image();
                var pos = node.getPos();
                img.onload = function ()
                {
                    ctx.drawImage(img, pos.x - 16, pos.y - 16);
                }

                var n = _nodes[node.id];
                if (n && n.imageUrl)
                {
                    var size = 52;
                    var url = n.imageUrl.replace("{width}", size).replace("{height}", size);
                    img.src = url;
                    img.className = myClass;
                }
                else
                {
                    img.src = '../Images/UserNoImage.png';
                }
            },
            'contains': function (node, pos)
            {
                var npos = node.pos.getc(true),
                dim = node.getData('dim');
                return this.nodeHelper.square.contains(npos, pos, dim);
            }
        }
});

Answer 1

You can apply CSS styles to the html elements. The custom node which you have defined is simply drawing image on the canvas. The node does not correspond to any html element.

Hence before you call function drawImage you should make sure that the image is customized to your requirement, only then you call drawImage. In this case infovis does not know anything about css, all that it does is call drawImage which simply draws an image on the canvas.

Thus, the question you should tackle is, how do you apply css to the image so that its customized to your requirement. And this question is independent of infovis.