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无关。

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

1 个答案: