javascript - 如何在 Infovis Toolkit 中制作自定义节点？

Question

我一直在从事 Infovis 工具包项目，虽然所有功能都已完成，但我无法完成视觉效果。 Infovis 工具包 API 文档很好，但我的自定义节点类型不起作用。我正在使用超树，我想制作两种不同的自定义节点类型。一个来自图像，另一个作为绘制路径。非常感谢所有帮助，谢谢!

编辑:[我尝试的解决方案并不是那么方便。相反，我使用 JIT Controller 中的 onCreateLabel() 来使用 HTML 自定义节点。看到了性能的明显改进，并且在自定义节点方面获得了更大的灵 active 。 ]

这是我到目前为止想出的:

$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

因为您将图像 src 设置为文件 URL，所以加载文件需要时间。所以代码在图像加载之前调用了 drawImage。

您可以通过修改代码以在图像的 onload 事件处理程序中运行 drawImage 调用(图像加载完成后运行)来解决此问题。

$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';
        }
    }
});