JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<svg width="960" height="1060"></svg>

CSS

.node circle {
  fill: #999;
}

.node text {
  font: 10px sans-serif;
}

.node--internal circle {
  fill: #555;
}

.node--internal text {
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

JavaScript

var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        g = svg.append("g").attr("transform",
          "translate(" + (width / 2 + 40) + "," + (height / 2 + 90) + ")");
			var data =   {"name" : "A", "info" : "tst", "children" : [
                {"name" : "A1", "children" : [
                        {"name" : "A12" },
                        {"name" : "A13" },
                        {"name" : "A14" },
                        {"name" : "A15" },
                        {"name" : "A16" }
                    ] },
                {"name" : "A2", "children" : [
                        {"name" : "A21" },
                        {"name" : "A22", "children" : [
                        {"name" : "A221" },
                        {"name" : "A222" },
                        {"name" : "A223" },
                        {"name" : "A22" }
                    ]},
                        {"name" : "A23" },
                        {"name" : "A24" },
                        {"name" : "A25" }] },
                {"name" : "A3", "children": [
                        {"name" : "A31", "children" :[
                                {"name" : "A311" },
                                {"name" : "A312" },
                                {"name" : "A313" },
                                {"name" : "A314" },
                                {"name" : "A315" }
                            ]}] }
            ]};
     	var jj = [];
      var addLevel = function(d, i){
      	d["id"] = i
        
        //d["parent"] = i -1;
        if(d["children"] && d["children"].length > 0){
        	for(j=0; j < d["children"].length; j++){
          	 d["children"][j] = addLevel(d["children"][j], i+1);
          }
        }
        var c = jQuery.extend({}, d);
        delete c["children"];
        jj.push(c);
        return d;
      }
     	
      data["id"] = 0;
      //data[0]["parent"] =  null;
      var c = jQuery.extend({}, data);
        delete...