Índice
É aqui que este plugin é chamado Spacetree desenvolvido em Javascript que nos permite apresentar a informação em forma de árvore, de forma dinâmica e intuitiva, a partir de estruturas organizacionais ou diretórios de informação Spacetree faz.
- 1- Primeiro nós criamos nosso JSON, é aquele que conterá todos os dados para exibir em nossa árvore, devemos ter o cuidado de estabelecer a estrutura correta e manter a relação de pai e filho em nossa JSON.
id: "node02",
nome: "0,2",
dados: {},
crianças: [{
id: "node13",
nome: "1,3",
dados: {},… .
- 2 - Nós criamos a instância do componente Spacetree e nós o associamos a um seletor, neste caso o id de um elemento:
var st = new $ jit.ST ({
injectInto: 'infovis', …
- 3 - Adicionamos algumas opções adicionais, como a duração da animação e a distância entre cada nó pai e seu filho:
duração: 800,
transição: $ jit.Trans.Quart.easeInOut,
levelDistance: 50,
- 4 - Em seguida, definimos o estilo dos nós e eixos; altura, comprimento, cor e tipo de forma que pode variar de retangular a circular, é importante mencionar que para cada nó ter um estilo individual a opção substituível deve ter o valor verdadeiro:
Não dê: {
altura: 20,
largura: 60,
tipo: 'retângulo',
cor: '#aaa',
substituível: verdadeiro
},
Beira: {
tipo: 'bezier',
substituível: verdadeiro
},
- 5 - Com o método onCreateLabel Atribuímos todos os eventos e manipuladores de nossa árvore, além de podermos atribuir estilos aos rótulos em cada nó:
onCreateLabel: function (label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function () {
if (normal.checked) {
st.onclick (node.id);
} outro {
st.setRoot (node.id, 'animate');
}
};
var style = label.style;
style.width = 60 + 'px';
style.height = 17 + 'px';
style.cursor = 'ponteiro';
style.color = '# 333';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.paddingTop = '3px';
},
- 6 - Com o método onBeforePlotNode as propriedades de um nó são alteradas antes de serem desenhadas, como alterar a cor de um nó dependendo de sua posição ou de quantos filhos ele possui.
onBeforePlotNode: function (node) {
if (node.selected) {
node.data. $ color = "# ff7";
}
outro {
delete node.data. $ color;
if (! node.anySubnode ("existe")) {
var count = 0;
node.eachSubnode (function (n) {count ++;});
node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [contagem];
}
}
},
- 7 - Com o método onBeforePlotLine as propriedades dos eixos são alteradas antes de serem desenhados:
onBeforePlotLine: function (adj) {
if (adj.nodeFrom.selected && adj.nodeTo.selected) {
adj.data. $ color = "#eed";
adj.data. $ lineWidth = 3;
}
outro {
excluir adj.data. $ color;
delete adj.data. $ lineWidth;
}
}
});
- 8 - Por fim, carregamos os dados JSON:
O resultado final seria o seguinte:
var st = new $ jit.ST ({injectInto: 'infovis', duração: 800, transição: $ jit.Trans.Quart.easeInOut, levelDistance: 50, Navigation: {enable: true, panning: true}, Node: { altura: 20, largura: 60, tipo: 'retângulo', cor: '#aaa', substituível: verdadeiro}, Borda: {tipo: 'bezier', substituível: verdadeiro}, onBeforeCompute: função (nó) {Log.write ("carregando" + node.name);}, onAfterCompute: function () {Log.write ("done");}, onCreateLabel: function (label, node) {label.id = node.id; label.innerHTML = node.name; label.onclick = function () {if (normal.checked) {st.onclick (node.id);} else {st.setRoot (node.id, 'animate');}}; var style = label.style; style.width = 60 + 'px'; style.height = 17 + 'px'; style.cursor = 'ponteiro'; style.color = '# 333'; style.fontSize = '0.8em'; style.textAlign = 'center'; style.paddingTop = '3px';}, onBeforePlotNode: function (node) {if (node.selected) {node.data. $ color = "# ff7";} else {delete node. dados. $ color; if (! node.anySubnode ("exist")) {var count = 0; node.eachSubn ode (função (n) {contagem ++; }); node.data. $ color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'] [contagem]; }}}, onBeforePlotLine: function (adj) {if (adj.nodeFrom.selected && adj.nodeTo.selected) {adj.data. $ color = "#eed"; adj.data. $ lineWidth = 3; } else {delete adj.data. $ color; delete adj.data. $ lineWidth; }}}); st.loadJSON (json); st.compute (); st.geom.translate (novo $ jit.Complex (-200, 0), "atual"); st.onclick (st.root); Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
