JSFiddle - React, Tailwind, and code Playground
by Digambar Raut
HTML
<div class="myTree" ></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
CSS
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
JavaScript
// JavaScript Document
var treeData = [
{
"name": "REPORTING",
"parent": "null",
"children": [
{
"name": "BO",
"parent": "REPORTING",
"children": [
{
"name": "I H S",
"parent": "BO",
"children": [
{
"name": "34534",
"parent": "BO",
"children": [
{
"name": "Application Name",
"parent": "34534",
}
]
},
{
"name": "34535",
"parent": "BO",
"children": [
{
"name": "Application Name",
"parent": "34535",
}
]
},
{
"name": "34536",
"parent": "BO",
"children": [
{
"name": "Application Name",
"parent": "34536",
}
]
}
]
},
{
"name": "TOMCAT",
"parent": "BO",
"children": [
{
"name": "34534",
"parent": "TOMCAT",
"children": [
{
"name": "Application Name",
"parent": "34534",
}
]
},
{
"name": "34535",
"parent": "Level 2: A",
"children": [
{
"name": "Application Name",
"parent": "Level 2: A",
}
]
},
{
"name": "34536",
"parent": "Level 2: A",
"children": [
{
"name": "Application Name",
"parent": "Level 2: A",
}
]
}
]
},
{
"name": "WAS",
"parent": "Level 2: A",
"children": [
{
"name": "34534",
"parent": "Level 2: A",
"children": [
{
"name": "Application Name",
"parent": "Level 2: A",
...