Настройка JavaScript Visualization Toolkit Узел Spacetree - PullRequest
Новая
       51

Настройка JavaScript Visualization Toolkit Узел Spacetree

37 голосов
/ 16 декабря 2010

Я видел, что многие люди рекомендуют JavaScript Visualization Toolkit (The JIT) для оргструктуры.Я пытаюсь использовать SpaceTree из JavaScript InfoVis Toolkit для диаграммы org.Узлы в моей организационной диаграмме похожи на сам по себе компонент с изображением профиля сотрудника, двумя разными значками, отображающими пометки при нажатии, и несколькими строками простого текста с именем, заголовком и количеством отчетов ... каждая строка разделеналегкой горизонтальной линией.Что-то вроде:

Мой вопрос: можно ли настроить узлы космического дерева в такой степени?Могу ли я иметь 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 в методе onCreateLabel в example5.js в:, но, похоже, ничего не делает.Хотя я не уверен, будет ли это хорошим способом настройки узла.Example5 находится на веб-сайте JIT (мне не разрешено публиковать более одной гиперссылки)
  3. Расширение Graph.Node ... Я все еще изучаю эту опцию, и в этот момент времени я не знаюНасколько сложно использовать в дереве пространства Graph.myNode и как будет выглядеть Graph.myNode?Мне нужно больше думать об этом и посмотреть, возможно ли это.

Ответы [ 5 ]

5 голосов
/ 09 января 2012

Космическое дерево может быть настроено очень много. Узлы могут отображать изображения или все, что мы хотим. Мы можем иметь пользовательские события щелчка для узлов. Чтобы иметь пользовательские события, вам нужно перерисовать все дерево в событии onclick.

Вот пример. О функции успеха события клика. Здесь я назвал событие click для класса «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 голос
/ 08 января 2012

Вы можете сделать yourNode предком-прототипом Graph.node, настроить нужные слоты, а затем добавить соответствующие настройки кода рендеринга / форсирования.

0 голосов
/ 14 июля 2013 
 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 голосов
/ 11 февраля 2012

если вы не против работать только с HTML5 / Canvas, попробуйте это также http://orgplot.codeplex.com, простой узел поддержки изображений интерфейса.

0 голосов
/ 11 февраля 2012

Я использую пробелы и просто устанавливаю тип метки на 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});
...