定制JavaScript可视化工具包Spacetree节点
我看到很多人推荐使用JavaScript可视化工具包（The JIT）作为组织结构图。 我正在尝试使用JavaScript的InfoVis Toolkit的SpaceTree for组织结构图。 我的组织结构图中的节点本身就像一个组成部分，有员工个人资料图片，两个不同的图标，显示在点击覆盖和约3行简单的文本有名称，标题和报告数量…每行是分开的由一条轻的水平线。 就像是：
我的问题是，是否有可能自定义这样的spacetree节点？ 我可以让Node几乎像另一个具有自己渲染方法的“组件”或JavaScript对象吗？
我研究论坛和我考虑的一些选项是：
- $ jit.ST.NodeTypes.implement（）…但基于我看到的例子，这似乎在帮助定制节点的形状等方面，但不像上面绘制的布局。 我指的是自定义类似于： http : //groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
- 我尝试在example5.js中的onCreateLabel方法中设置innerHtml：但是它似乎什么都不做。 虽然，我不确定这是否会成为节点定制的好方法。 示例5在JIT网站（我不允许发布多个超链接）
- 扩展Graph.Node …我仍然看着这个选项，这个时间点，我不知道如何使空间树使用Graph.myNode是多么复杂，Graph.myNode甚至会是什么样子？ 我需要更多地思考这些问题，看看是否可行。
Spacetree可以被定制非常多。 节点可以显示图像或任何我们想要的。 我们可以为节点定制点击事件。 要进行自定义事件，您必须在onclick事件中重新绘制整个树。
这是一个例子。 点击事件的成功function。 在这里我已经调用类“clickable”上的click事件
$.ajaxSetup({ cache: false }); $(".clickable").live("click", function () { $.ajax({ url: url + "?id=" + parentId + "&ts=" + new Date().getMilliseconds(), type: "POST", cache: false, dataType: "html", success: function (html) { init(html); } }); }); 名称属性可以用来给像这样的图像：
{id:"90", name:"<a href='javascript:;' class='clickable' name='90'><img src='images/picture.gif' width='30' height='30' alt='pic' /></a>", data:{}, children:[]}
标记为答案如果有用。 谢谢。
你可以让你的节点成为Graph.node的原型祖先，设置你想要的插槽，然后添加合适的渲染/强制代码自定义。
我正在使用空间树，我只是将标签types设置为HTML（这是默认值），您可以使用常规的HTML和CSS来标记样式。 我有图片，链接，文字等
请注意，您正在使用标签，而不是节点 。 节点是graphics组件; 标签是您看到的代表节点的视觉。
在“onCreateLabel”的函数中初始化spacetree传递时：
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});
如果你不介意只使用HTML5 / Canvas，也可以试试http://orgplot.codeplex.com ，简单的界面支持图像节点。
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); }
}）;
