JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body ng-app="App" ng-controller="treeCrtl">
    <div id="search"></div>
    <work-history></work-history>
</body>

CSS

.node {
            cursor: pointer;
        }

        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 1.5px;
        }

        .found {
            fill: #ff4136;
            stroke: #ff4136;
        }
        .node text {
            font: 10px sans-serif;
        }

        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 1.5px;
        }
        /*Just to ensure the select2 box is "glued" to the top*/
        .search {
            width: 100%;
        }

JavaScript

var app = angular.module('App');
var ctrl = app.controller("treeCrtl", ["$scope", function ($scope) {

}]);
ctrl.directive("workHistory", function () {
   return {
          restrict: 'E',
          link: function link(scope, el, attr) {
          var div = d3.select("body")
                        .append("div") // declare the tooltip div
                        .attr("class", "tooltip")
                        .style("opacity", 0);

                    var margin = { top: 20, right: 120, bottom: 20, left: 120 },
                        width = 960 - margin.right - margin.left,
                        height = 800 - margin.top - margin.bottom;
                    var i = 0,duration = 750,root,select2_data;
                    var diameter = 960;
                    var tree = d3.layout.tree()
                        .size([height, width]);

                    var diagonal = d3.svg.diagonal()
                        .projection(function (d) { return [d.y, d.x]; });

                    var svg = d3.select(el[0]).append("svg")
                        .attr("width", width + margin.right + margin.left)
                        .attr("height", height + margin.top + margin.bottom)
                        .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                    //recursively collapse children
                    function collapse(d) {
                        if (d.children) {
                            d._children = d.children;
                            d._children.forEach(collapse);
                            d.children = null;
                        }
                    }

                    // Toggle children on click.
                    function click(d) {
                        if (d.children) {
                            d._children = d.children;
                            d.children = null;
                        }
                        else {
                           ...