logo标签列表

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

javascriptvisualizationtoolkitthejitspace-tree
36

我看到很多人推荐JavaScript可视化工具包（The JIT）来制作组织结构图。我正在尝试使用JavaScript InfoVis Toolkit的SpaceTree来制作组织结构图。我的组织结构图中的节点就像一个组件，它拥有员工头像、两个不同的图标，当点击时会显示覆盖物，以及三行简单的文本，分别显示名字、职称和下属人数...每一行之间都由一条轻微的水平线分隔。类似于：

我的问题是，是否可以自定义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，但似乎没有作用。虽然我不确定这是否是节点自定义的好方法。Example5位于JIT网站上（我不允许发布超过一个链接）。
  3. 扩展Graph.Node...我仍在研究这个选项，在此时，我不知道使用Graph.myNode会有多复杂，Graph.myNode会是什么样子？我需要更深入地考虑这些问题并看看是否可行。
7
Ram在Stack Overflow之外得到了回复：http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/5770f2cbf4966ae7/a036baaea68b19d3?pli=1 - Eric J.
4
不接受别人的问题的人会削弱团结我们的社区的基础。 - Cris Stringfellow
5个回答
5

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

如果有用，请标记为答案。谢谢。
1
你可以将你的节点（yourNode）设置为 Graph.node 的原型祖先，设定所需的 slot，然后添加适当的渲染/力学代码自定义。
0
我正在使用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});
0
 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);
            }

});

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接