自定义JavaScript Visualization Toolkit Spacetree节点

Question

我看到很多人推荐用于组织结构图的JavaScript Visualization Toolkit(The JIT).我正在尝试使用SpaceTree的JavaScript InfoVis Toolkit来组织图表.在我的组织结构图中的节点,就像是本身有员工的个人档案相片组件,两种不同的图标显示其姓名,职务和报告的数量上点击叠加和简单的文本的一些三线......每一行分离通过浅水平线.就像是:

我的问题是,是否可以自定义spacetree节点？我可以让Node几乎像另一个具有自己的render方法的"组件"或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:但它似乎什么都不做.虽然,我不确定这是否是节点定制的好方法.Example5在JIT网站上(我不允许发布多个超链接)
3. 扩展Graph.Node ......我还在找这个选项,它这个时间点,我不知道它是多么复杂,有空间树利用Graph.myNode又会有怎样Graph.myNode甚至是什么样子？我需要在这些方面进行更多思考,看看它是否可行.

Answer 1

Spacetree可以非常定制.节点可以显示图像或我们想要的任何内容.我们可以为节点提供自定义点击事件.要拥有自定义事件,您必须在onclick事件中重绘整个树.

这是一个例子.关于click事件的成功功能.在这里,我在类"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);                        
                }
              });
            });

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:[]}

如果有用,请标记为答案.谢谢.

Answer 2

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