tutorial - Personalizar JavaScript Visualization Toolkit Spacetree Node

d3js charts examples

Question

Vi a muchas personas recomendar JavaScript Visualization Toolkit (The JIT) para el organigrama. Estoy tratando de usar SpaceTree of JavaScript InfoVis Toolkit para el organigrama. Los nodos en mi organigrama son como un componente en sí mismo que tiene una foto de perfil de empleado, dos iconos diferentes que muestran superposiciones al hacer clic y unas 3 líneas de texto simple con nombre, título y número de informes ... cada línea está separada por una línea horizontal ligera. Algo como:

Mi pregunta es, ¿es posible personalizar los nodos de espacio libre en tal medida? ¿Puedo tener Node casi como otro "componente" o objeto de JavaScript que tiene su propio método de renderizado?

Investigué en foros y algunas opciones que consideré son:

1. $ jit.ST.NodeTypes.implement () ... pero en base a los ejemplos que vi, esto parece estar ayudando a personalizar el nodo en términos de formas, etc. pero no como el diseño dibujado anteriormente. Me refiero a la personalización, algo así como: http://groups.google.com/group/javascript-information-visualization-toolkit/browse_thread/thread/a4a059cbeb10ba23/ebf472366cdbbdef?lnk=gst&q=spacetree+nodetype#ebf472366cdbbdef
2. Intenté configurar innerHtml en el método onCreateLabel en example5.js en: pero parece que no está haciendo nada. Aunque no estoy seguro de si esa será una buena forma de personalización de nodo. El ejemplo 5 está en el sitio web de JIT (no tengo permiso para publicar más de un hipervínculo)
3. Extendiendo Graph.Node ... Todavía estoy investigando esta opción y es este punto del tiempo, no sé lo complicado que es tener el uso de tree tree Graph.myNode y cómo se verá Graph.myNode? Necesito pensar más en esas líneas y ver si es factible.

Answer 1

El Spacetree se puede personalizar mucho. Los nodos pueden mostrar imágenes o cualquier cosa que deseamos. Podemos tener eventos de clics personalizados para los nodos. Para tener eventos personalizados, tendrá que volver a dibujar todo el árbol en el evento onclick.

Aquí hay un ejemplo. En la función de éxito del evento click. Aquí he llamado al evento click en la clase "clicable"

 $.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);
}
});
});

La propiedad de nombre se puede usar para dar la imagen de esta manera:

{id:"90", name:"<a href=''javascript:;'' class=''clickable'' name=''90''><img src=''images/picture.gif'' width=''30'' height=''30'' alt=''pic'' /></a>", data:{}, children:[]}

Marcar como respuesta si es útil. Gracias.

Answer 2

Estoy usando spacetrees y acabo de establecer el tipo de etiqueta en HTML (que es el valor predeterminado) y puedes usar HTML y CSS normales para dar estilo a tus etiquetas. Tengo imágenes, enlaces, texto, etc.

Tenga en cuenta que está trabajando con la etiqueta y no con el nodo . El nodo es el componente gráfico; la etiqueta es la visual que ves que representa el nodo.

Cuando inicialice el pase de espacio libre en una función para "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 3

Puede hacer que suNodo sea el ancestro prototipo de Graph.node, configurar las ranuras que desee y, a continuación, agregar las personalizaciones apropiadas de render / force code.

Answer 4

si no te importa trabajar solo con HTML5 / Canvas, prueba esto también en http://orgplot.codeplex.com , nodo de imagen de soporte de interfaz simple.

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

});