自定义JavaScript可视化工具包Spacetree节点

我看到很多人推荐JavaScript可视化工具包（JIT）用于组织结构图。我正在尝试使用JavaScriptInfovisToolkit的SpaceTree来创建组织结构图。“我的组织结构图”中的节点本身就像一个组件，它有员工档案图片、两个不同的图标，单击时会显示重叠，以及大约3行简单的文本，其中包含名称、标题和报告数。。。每条线由一条较浅的水平线分隔。比如：

我的问题是，是否可以将spacetree节点定制到这样的程度？我可以让节点像另一个“组件”或JavaScript对象一样拥有自己的呈现方法吗

我在论坛上进行了研究，我考虑的一些选择是：

$jit.ST.NodeType.implement（）。。。但根据我看到的例子，这个 似乎有助于自定义节点的形状等，但 不像上面画的布局。我指的是定制 比如：

我尝试在example5.js中的onCreateLabel方法中设置innerHtml，具体位置为： 但它似乎什么也没做。虽然，我不确定这是否正确 这将是一种很好的节点定制方法。示例5位于JIT网站（我不允许发布多个超链接）

正在扩展Graph.Node。。。我仍在研究这一选择，并将其付诸实施 现在，我不知道拥有空间有多复杂 树使用Graph.myNode，那么Graph.myNode会是什么样子呢？我 我们需要更多地思考这些问题，看看它是否可行

---

您可以使您的节点成为Graph.node的原型祖先，设置所需的插槽，然后添加适当的渲染/强制代码自定义。

空间树可以进行大量自定义。节点可以显示图像或我们想要的任何东西。我们可以为节点自定义单击事件。要拥有自定义事件，您必须在onclick事件中重新绘制整个树

这里有一个例子。单击事件的成功功能。在这里，我将类上的单击事件称为“clickable”

name属性可用于提供如下图像：

{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]}

{id:“90”，名称：，数据：{}，子项：[]}

---

如果有用，标记为答案。谢谢。

我正在使用spacetrees，我只是将标签类型设置为HTML（这是默认值），您可以使用常规HTML和CSS来设置标签样式。我有图像、链接、文本等

请注意，您使用的是标签，而不是节点。节点是图形组件；标签是您看到的表示节点的视觉对象

在函数“onCreateLabel”中初始化spacetree过程时：

var myOnCreateLabel=函数（标签，节点）{
label.onclick=函数（事件）{/*设置onclick处理程序*/}；
label.innerHTML=“；//在标签中使用图像
};
var myST=new$jit.ST（{/*其他设置*/onCreateLabel:myOnCreateLabel}）；

如果您不介意只使用HTML5/Canvas，也可以试试这个，简单界面也支持图像节点

 this.st=new $jit.ST(

{

onCreateLabel:函数（标签，节点）
{
变量labelContent=$（“”+
'' +
'' +
'' +
'' +
'' +
''+node.name+''+
'' +
'');
thisObject.onCreateLabel.raise（thisObject，{labelContent:labelContent，node:node}）；
if（node.data&&node.data.Icon&&node.data.Icon！=“”）
{
labelContent.find（“.iconTd”）.append（$（“”）；
}
其他的
{
labelContent.find（“.iconTd”）.remove（）；
}
var lblCtl=$（label）.append（labelContent）；
if（node.data.data.ChildrenCount）
{
labelContent.append（“”）；
}
如果（node.name.length>40）
{
lblCtl.attr（“title”，node.name）；
node.name=node.name.substr（0,37）；
node.name=node.name+“…”；
}                        
lblCtl.单击（函数（发送方）
{
//thisObject.isNodeClicked=true；
var target=$（sender.target）；
如果（！target.hasClass（“子节点”））
{
if（thisObject.currentSelectedNode）
{
thisObject.currentSelectedNode.buttonContainer.hide（）；
}
var btnContainer=labelContent.find（“.buttonContainer”）；
thisObject.currentSelectedNode={nodeElement:lblCtl，node:node，buttonContainer:btnContainer，event:sender}；
btnContainer.append（thisObject.$globalButtonContainer.show（））.show（）；
var button=target.closest（“.chartActionButton”）；
如果（按钮长度>0）
{
提升（thisObject，{name:button.attr（“name”），nodeElement:lblCtl，node:node，button:target}）；
}
其他的
{
thisObject.onNodeClick.raise（thisObject，thisObject.currentSelectedNode）；
}
}
其他的
{
thisObject.st.onClick（node.id）；
}
});
label.id=node.id；
//设置标签样式
setNodeStyle（node.data.Style，label.Style）；
}

---

}))

拉姆在SO之外得到了回应：不接受自己问题的人破坏了与我们紧密相连的社区结构。

var myOnCreateLabel = function(label, node) {
  label.onclick = function(event) {/* setup onclick handler */};
  label.innerHTML = "<img src='myImage.png' />"; // use image in label
};
var myST = new $jit.ST({/*other settings*/ onCreateLabel: myOnCreateLabel});

 this.st=new $jit.ST(

            onCreateLabel: function (label, node)
            {
                var labelContent = $('<table cellpadding="0" cellspacing="0" class="nodeContainer"><tr><td>' +
                    '<div class="buttonContainer">' +
                    '</div></td></tr><tr><td>' +
                    '<table  class="nodeBox" cellpadding="0" cellspacing="0">' +
                    '<tr>' +
                    '<td class="iconTd"></td>' +
                    '<td class="center nodeName">' + node.name + '</td>' +
                    '</tr></table>' +
                    '</td></tr></table>');
                thisObject.onCreateLabel.raise(thisObject, { labelContent: labelContent, node: node });
                if (node.data && node.data.Icon && node.data.Icon != "")
                {
                    labelContent.find(".iconTd").append($("<img src='" + node.data.Icon + "' alt=''>"));
                }
                else
                {
                    labelContent.find(".iconTd").remove();
                }

                var lblCtl = $(label).append(labelContent);

                if (node.data.Data.ChildrenCount)
                {
                    labelContent.append("<tr><td class='subnode'></td></tr>");
                }
                if (node.name.length > 40)
                {
                    lblCtl.attr("title", node.name);
                    node.name = node.name.substr(0, 37);
                    node.name = node.name + "...";
                }                        
                lblCtl.click(function (sender)
                {
                    //thisObject.isNodeClicked = true;
                    var target = $(sender.target);
                    if (!target.hasClass("subnode"))
                    {
                        if (thisObject.currentSelectedNode)
                        {
                            thisObject.currentSelectedNode.buttonContainer.hide();
                        }
                        var btnContainer = labelContent.find(".buttonContainer");
                        thisObject.currentSelectedNode = { nodeElement: lblCtl, node: node, buttonContainer: btnContainer, event: sender };
                        btnContainer.append(thisObject.$globalButtonContainer.show()).show();
                        var button = target.closest(".chartActionButton");
                        if (button.length > 0)
                        {
                            thisObject.onNodeAction.raise(thisObject, { name: button.attr("name"), nodeElement: lblCtl, node: node, button: target });
                        }
                        else
                        {
                            thisObject.onNodeClick.raise(thisObject, thisObject.currentSelectedNode);
                        }
                    }
                    else
                    {
                        thisObject.st.onClick(node.id);
                    }
                });
                label.id = node.id;
                //set label styles
                thisObject.setNodeStyle(node.data.Style, label.style);
            }