如何在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無關。