定制JavaScript可视化工具包Spacetree节点

我看到很多人推荐使用JavaScript可视化工具包(The JIT)作为组织结构图。 我正在尝试使用JavaScript的InfoVis Toolkit的SpaceTree for组织结构图。 我的组织结构图中的节点本身就像一个组成部分,有员工个人资料图片,两个不同的图标,显示在点击覆盖和约3行简单的文本有名称,标题和报告数量…每行是分开的由一条轻的水平线。 就像是:

我的问题是,是否有可能自定义这样的spacetree节点? 我可以让Node几乎像另一个具有自己渲染方法的“组件”或JavaScript对象吗?

我研究论坛和我考虑的一些选项是:

  1. $ jit.ST.NodeTypes.implement()…但基于我看到的例子,这似乎在帮助定制节点的形状等方面,但不像上面绘制的布局。 我指的是自定义类似于: http : //groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
  2. 我尝试在example5.js中的onCreateLabel方法中设置innerHtml:但是它似乎什么都不做。 虽然,我不确定这是否会成为节点定制的好方法。 示例5在JIT网站(我不允许发布多个超链接)
  3. 扩展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); } 

});