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

Question

我看到很多人推荐用于组织结构图的 JavaScript 可视化工具包（The JIT）。我正在尝试使用 JavaScript InfoVis Toolkit 的 SpaceTree 来制作组织结构图。我的组织结构图中的节点本身就像一个组件，其中包含员工个人资料图片、单击时显示叠加的两个不同图标以及大约 3 行简单文本，其中包含名称、标题和报告数量……每行都是分开的通过一条浅水平线。比如：

我的问题是，是否可以将空间树节点自定义到这种程度？我可以让 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. 我尝试设置innerHtml在 example5.js 的 onCreateLabel 方法中： 但它似乎什么也没做。虽然，我不确定是否是这样 将是节点定制的一个好方法。示例 5 位于 JIT 网站（我不允许发布多个超链接）
3. 扩展 Graph.Node ...我仍在研究此选项，它 此时此刻，我不知道拥有空间有多复杂 树使用 Graph.myNode ，Graph.myNode 会是什么样子？我 需要在这些方面进行更多思考，看看它是否可行。

Answer 1

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

这是一个例子。关于点击事件的成功函数。在这里，我将类上的单击事件称为“clickable”。

      $.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 的原型祖先，设置所需的插槽，然后添加适当的渲染/强制代码自定义。

Answer 3

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

请注意，您使用的是标签，而不是节点。节点是图组件；标签是您看到的代表节点的视觉效果。

当您初始化 spacetree 时，传入“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});

Answer 4

如果您不介意仅使用 HTML5/Canvas，也可以尝试一下 http://orgplot.codeplex.com，界面简单，也支持图像节点。

Answer 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);
            }

});