Tree(Arvore) Json

Colaboração wanderval https://forum.imasters.com.br/profile/209231-wanderval/

by Marcos vini

HTML

<div id='graficorede'>
<div class='graficorede_header'><div><div><h3>Gráfico da Rede</h3></div></div>

<div class='txt_zoom'>Zoom</div><input type="button" id="zoomout" class="button" value="-">
<input id="zoom" type="range" min="100" max="150" value="100"> 
<input type="button" id="zoomin" class="button" value="+">
</div>
<div class='graficorede_body'>

<div class="tree" id='drag'>
<ul>

</ul>
</div>

</div>


</div>

CSS

body{
  
      overflow-x: hidden;

}
#graficorede {
    -webkit-box-shadow: 0 1px 15px 1px rgba(81,77,92,.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(81,77,92,.08);
    box-shadow: 0 1px 15px 1px rgba(81,77,92,.08);
    background-color: #fff;
}

#graficorede .graficorede_header {
    border-bottom: 1px solid #ebedf2;
    display: table;
    width: 100%;
    padding: 0 2.2rem;
    height: 5.1rem;
}

#graficorede .graficorede_header div {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    margin-right: 690px;
}

#graficorede .graficorede_header div div {
    display: table;
    table-layout: fixed;
    height: 100%;
}

#graficorede .graficorede_header div div h3 {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3rem;
    font-weight: 500;
    color: #575962;
    margin-bottom: .5rem;
    line-height: 1.2;
    margin-top: 0;
}

#graficorede .graficorede_body {
    padding: 1.1rem 1.1rem;
    color: #575962;
    min-height: 1900px;
}




input[type=range] {
  margin-top: 40px;
  -webkit-appearance: none;
  display: inline-block;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 1rem;
  border-radius: 1rem;
  padding: 5px;
  cursor: pointer;
  background: #f8f8fb;
  border: 1px solid #00000024;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;

  background: transparent;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 62, 0.67), 0px 0px 0px rgba(0, 0, 88, 0.67);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #716aca;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {

}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 32px;
  cursor: pointer;
  box-shadow: 0.1px 0.1px 0px...

JavaScript

!function(d){

    "use strict";

    var zoom = d.querySelector('#zoom');

    var ul_tree = '.tree ul';




    if(zoom){
        let zoom_div = d.querySelector(ul_tree);
        zoom.addEventListener("input", function() {
            zoom_div.style.zoom = zoom.value+'%';

        }, false); 	
	
    }

    var tree;
    var arrayFlatten;

    function initialize() {
        tree = null;
        tree = new Tree('0','Mãe e Pai',ul_tree);
        var li = d.createElement("li"); 
        var a = d.createElement("a");
        var ul = d.createElement("ul"); 
        ul.className = 'root';
        var x = d.createTextNode(tree._root.title);
        arrayFlatten = [];
        li.appendChild(a);  
        a.appendChild(x); 
        li.appendChild(ul);  
        tree._base.insertBefore(li,tree._base.childNodes[0]);
        const data = getData();
	

        for(let i = 0; i < data.length; i++) {
            tree.add(data[i].id, data[i].parentId ,data[i].title, tree.traverseBF);
        }
        drawerTree();
  
    }

    function recursiveNodes(object, node) {
        let list = d.createElement("ul");
        let item;
        let text;
        let anchor;
        for (let child of object.children) {
            item = d.createElement("li");
            anchor = d.createElement("a"); 

        text = d.createTextNode(child.title);
        anchor.appendChild(text);

        item.appendChild(anchor);
        if (typeof(child.children) == "object") {
            recursiveNodes(child, item);
        }
        
        list.appendChild(item);
        
        
    }
    if (list.parentElement != null) {
        item.appendChild(list);
    }
    
    if(object.children.length === 0) {
    			
        list.className = 'no-link';
    }
    
    
    node.appendChild(list);
}

function drawerTree() {
    recursiveNodes({ children: tree._root.children }, d.querySelector('.root'));
	
}

function Node(data,title) {
    this.data = data;
    this.title = title;
    this.parent =...