JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
<div id="tree-container" class="col-md-12 hide "></div>

CSS

.node {
    cursor: pointer;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node text {
    font: 10px sans-serif;
}
path.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}
.link text {
    font: 10px sans-serif;
    fill: #CC0000;
}

JavaScript

var current_hm = '61c5be02-cbca-11e4-91a8-000000000001';

var treeData={"expand": true, "name": "Home", "childs": 7, "povpath": "6db4940f-cbca-11e4-9bdf-000000000009", "adjacency": "6db4940f-cbca-11e4-9bdf-000000000009", "_expand": false, "is_move": true, "pov": "6c8a38e8-cbca-11e4-8ca0-000000000008", "pk": "61c5be02-cbca-11e4-91a8-000000000001", "children": [{"expand": false, "name": "Geography", "childs": 4, "povpath": "7d7c370c-2961-4c0f-bb75-efc7dc62e2c0", "adjacency": "29903fb3-f1fb-4f73-9536-a3a5a9f11f9e", "_expand": false, "is_move": false, "pov": "c23c7da8-4266-4f71-ac70-b85a130a61af", "pk": "ec66c906-c905-4555-a476-1641ebe2d2b2", "children": []}, {"expand": false, "name": "History", "childs": 1, "povpath": "edf075ef-be25-488a-9ce8-04b9cccb2f92", "adjacency": "644c1f5c-cbca-11e4-9985-000000000002", "_expand": false, "is_move": true, "pov": "61c5be02-cbca-11e4-91a8-000000000001", "pk": "656da59c-cbca-11e4-bd9b-000000000003", "children": []}, {"expand": false, "name": "POV_ROOT", "childs": 3, "povpath": "681615b8-fc72-40b5-a974-e5c52bc2cbb1", "adjacency": "32ffd154-d1db-4412-9139-ea9e051d05de", "_expand": false, "is_move": true, "pov": "d46e9e77-ea23-4bda-9e11-da3115253842", "pk": "a7225d15-560b-4576-941b-6fc7f842dcf1", "children": []}, {"expand": false, "name": "Science", "childs": 3, "povpath": "ba6d38e8-d2c4-11e4-a270-000000000002", "adjacency": "61c5be02-cbca-11e4-91a8-000000000001", "_expand": false, "is_move": true, "pov": "644c1f5c-cbca-11e4-9985-000000000002", "pk": "644c1f5c-cbca-11e4-9985-000000000002", "children": []}, {"expand": false, "name": "Technology", "childs": 0, "povpath": "bb758545-d2c4-11e4-a121-000000000003", "adjacency": "656da59c-cbca-11e4-bd9b-000000000003", "_expand": false, "is_move": true, "pov": "656da59c-cbca-11e4-bd9b-000000000003", "pk": "669361bd-cbca-11e4-8d36-000000000004", "children": []}]};


    // Calculate total nodes, max label length
    var totalNodes = 0;
    var maxLabelLength = 0;
    // variables for...