Настройка JavaScript Visualization Toolkit Узел Spacetree
Я видел, что многие люди рекомендуют JavaScript Visualization Toolkit (The JIT) для диаграммы org. Я пытаюсь использовать SpaceTree JavaScript InfoVis Toolkit для организационной диаграммы. Узлы в моей организационной диаграмме похожи на сам по себе компонент с изображением профиля сотрудника, двумя различными значками, отображающими пометки при нажатии, и несколькими строками простого текста с именем, заголовком и количеством отчетов... каждая строка разделена легкой горизонтальной линией. Что-то вроде:
У меня вопрос, возможно ли настроить узлы космического дерева в такой степени? Могу ли я иметь 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
- Я попытался установить innerHtml в методе onCreateLabel в example5.js по адресу: но, похоже, ничего не делает. Хотя я не уверен, будет ли это хорошим способом настройки узла. Example5 находится на веб-сайте JIT (мне запрещено публиковать более одной гиперссылки)
- Расширение Graph.Node ... Я все еще изучаю эту опцию, и в данный момент я не знаю, насколько сложно использовать дерево пространств с использованием Graph.myNode и как вообще будет выглядеть Graph.myNode? Мне нужно больше думать об этом и посмотреть, возможно ли это.
5 ответов
Космическое дерево может быть настроено очень много. Узлы могут отображать изображения или все, что мы хотим. Мы можем иметь пользовательские события щелчка для узлов. Чтобы иметь пользовательские события, вам нужно перерисовать все дерево в событии 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:[]}
Отметить как ответ, если это полезно. Благодарю.
Вы можете сделать yourNode предком-прототипом Graph.node, настроить нужные слоты, а затем добавить соответствующие настройки кода рендеринга / форсирования.
Я использую 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});
Если вы не против работать только с HTML5/Canvas, попробуйте также http://orgplot.codeplex.com/, простой узел поддержки изображений.
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);
}
});