如何在JavaScript InfoVis ToolKit中向自定义图像节点添加CSS样式

Question

我已经为强制导向的InfoVis图创建了自定义节点，在其中显示用户的图像。 我现在想为图像添加样式，例如添加边框并使其成为圆形。 我尝试添加css类，如下所示，但它不起作用。

 img.className = myClass;

这是我的自定义节点代码：

    //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

您可以将CSS样式应用于html元素。 您定义的自定义节点只是在画布上绘制图像。 该节点不对应任何html元素。

因此，在调用函数drawImage之前，应确保已根据需要对图像进行了自定义，然后才调用drawImage。 在这种情况下，infovis对CSS一无所知，它所要做的只是调用drawImage，它只是在画布上绘制图像。

因此，您应该解决的问题是，如何将css应用于图像，以便根据您的需求对其进行定制。 这个问题与infovis无关。