JSFiddle - React, Tailwind, and code Playground

by daniel silva

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div id="tree-container">Enter the links seperated by comma and click update</div>
    <div id="input">
        <textarea id="inputArea" style="padding: 0px; width: 100%; height:20em; outline: medium none;" wrap="off" autocorrect="off" autocapitalize="off" tabindex="0"></textarea>
        <button id="updateButton" type="button">Update</button> 
    </div>
</body>

CSS

#tree-container{
    width :80%;  
    float:left; 
}
#input{
    width :20%;
    float:left;  
}
.node {
    cursor: pointer;
}
.overlay {
    background-color:#EEE;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font-size:10px;
    font-family:sans-serif;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 3px;
}
.templink {
    fill: none;
    stroke: red;
    stroke-width: 6px;
}
.ghostCircle.show {
    display:block;
}
.ghostCircle, .activeDrag .ghostCircle {
    display: none;
}

JavaScript

function makeTree(links) {
    //console.log(links);
    
    var nodesByName = {};   
    var root;
    $.each(links, function( index, value ) {
        //console.log(value.source);

       var node1 = nodeByName(value.source);
       var node2 = nodeByName(value.target);
       if (node1.siblings) {if(jQuery.inArray(node2,node1.siblings)==-1) node1.siblings.push(node2);}
       else node1.siblings = [node2];
       if (node2.siblings) {if(jQuery.inArray(node1,node2.siblings)==-1) node2.siblings.push(node1);}
       else node2.siblings = [node1];
       if(root===undefined) root=node1;
    });    
    
    console.log(root);
    
    links=createLinks(root,[],[],null);
    console.log(links);
   
    var nodesByName = {};
    //var auxChild;
   // f
    links.forEach(function (link) {    
        //console.log(link);
        var parent = link.source = nodeByName(link.source);
        var child = link.target = nodeByName(link.target);
        if (parent.children) parent.children.push(child);
        else parent.children = [child];
    });
   //console.log(links);
   //g
    return links;

    function nodeByName(name) {
        return nodesByName[name] || (nodesByName[name] = {
            name: name
        });
    }
    
    function createLinks(node,links,processedNodes,parent) {
      //console.log(node.siblings);
      //console.log("processing:"+node.name);
      processedNodes[node.name]=1;     
      $.each(node.siblings, function( index, value ) {
         if(value.name==parent) return links;
         //console.log(node.name+"-"+value.name);
         links.push({source:node.name,target:value.name});
         if(!processedNodes[value.name]){
             //processedNodes[value.name]=1;
             createLinks(value,links,processedNodes,node.name);
         }
        });    
     
        return links;
    }
}

function dndTree(treeData) {
    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables...