自定义 JavaScript 可视化工具包 Spacetree 节点
Posted
技术标签:
【中文标题】自定义 JavaScript 可视化工具包 Spacetree 节点【英文标题】:Customizing JavaScript Visualization Toolkit Spacetree Node 【发布时间】:2011-05-26 05:02:17 【问题描述】:我看到很多人推荐用于组织结构图的 javascript Visualization Toolkit (The JIT)。我正在尝试将 JavaScript InfoVis Toolkit 的 SpaceTree 用于组织结构图。我的组织结构图中的节点本身就像一个组件,它有员工个人资料图片、两个不同的图标,点击时会显示叠加层,还有大约 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:
但它似乎什么也没做。虽然,我不确定这是否
将是节点定制的好方法。 Example5 在 JIT 网站上(我不能发布多个超链接)
扩展 Graph.Node ...我仍在研究这个选项,它
这个时间点,不知道有空间有多复杂
树使用 Graph.myNode,Graph.myNode 会是什么样子?一世
需要在这些方面进行更多思考,看看是否可行。
【问题讨论】:
Ram 在 SO 之外得到了响应:groups.google.com/group/… 不接受问题的人会破坏联系我们的社区结构。 【参考方案1】:Spacetree 可以自定义很多。节点可以显示图像或我们想要的任何东西。我们可以为节点自定义点击事件。要拥有自定义事件,您必须在 onclick 事件中重绘整个树。
这是一个例子。关于点击事件的成功函数。在这里,我将类上的点击事件称为“可点击”
$.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);
);
);
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:[]
如果有用,标记为答案。谢谢。
【讨论】:
【参考方案2】:您可以将 yourNode 设为 Graph.node 的原型祖先,设置所需的插槽,然后添加适当的渲染/强制代码自定义。
【讨论】:
【参考方案3】:我正在使用 spacetrees,我只是将标签类型设置为 HTML(这是默认设置),您可以使用常规 HTML 和 CSS 来设置标签样式。我有图片、链接、文字等。
请注意,您使用的是标签,而不是节点。节点是图组件;标签是您看到的代表节点的视觉对象。
当您在“onCreateLabel”函数中初始化空间树时:
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);
【讨论】:
【参考方案4】:如果你不介意只使用 HTML5/Canvas,也可以试试这个http://orgplot.codeplex.com,简单的界面也支持图像节点。
【讨论】:
【参考方案5】: 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);
);
【讨论】:
以上是关于自定义 JavaScript 可视化工具包 Spacetree 节点的主要内容,如果未能解决你的问题,请参考以下文章
自定义可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers)vs.net开发工具
带有自定义 --base-href 和 Nginx 路由的 Angular SPA
如何将自定义按钮添加到调用 JavaScript 函数的工具栏?