jit shared child display errors
by secretgspot
HTML
<script src="https://raw.github.com/theSociableme/jsfiddlefiles/master/jit.js"></script>
<div id="infovis" style="width:500px;height:500px;"></div>
JavaScript
var json = {
id: 0,
name: "Department of Employment & Economic Development",
children: [{
"id": 1,
"name": "JOBZ App User Access",
"children": [{
"id": 3,
"name": "MS SQL DB License",
"children": [{
"id": 4,
"name": "Linux Physical",
"children": [{
"id": 6,
"name": "Primary Site",
"children": []}]}]}]},
{
"id": 2,
"name": "Voice Services",
"children": [{
"id": 3,
"name": "MS SQL DB License",
"children": [{
"id": 4,
"name": "Linux Physical",
"children": [{
"id": 6,
"name": "Primary Site",
"children": []}]}]}]}]
};
var st = new $jit.ST({
orientation: 'top',
//id of viz container element
injectInto: 'infovis',
//set duration for the animation
duration: 800,
//set animation transition type
transition: $jit.Trans.Quart.easeInOut,
//set distance between node and its children
levelDistance: 50,
//enable panning
Navigation: {
enable: true,
panning: true
},
//set node and edge styles
//set overridable=true for styling individual
//nodes or edges
Node: {
height: 50,
width: 100,
type: 'rectangle',
color: '#aaa',
overridable: true
},
Edge: {
type: 'bezier',
overridable: true
},
//This method is called on DOM label creation.
//Use this method to add event handlers and styles to
//your node.
onCreateLabel: function(label, node) {
label.id = node.id;
label.innerHTML = node.name;
label.onclick = function() {
st.onClick(node.id);
};
//set label styles
var style = label.style;
style.width = 100 + 'px';
...