JSFiddle - React, Tailwind, and code Playground

by arvillarruel

HTML

<!DOCTYPE html>
<body>
<script src="http://d3js.org/d3.v2.min.js?2.9.6"></script>
    <script>
        
        var words = [
    {
        "group":"n",
        "word":"main node",
        "children":[
            {
                "group":"n",
                "name":"sub node 1"
            },
            {
                "group":"n",
                "name":"sub node 2"
            },
            {
                "group":"n",
                "name":"sub node 3"
            },
            {
                "group":"v",
                "name":"sub node 4"
            },
            {
                "group":"s",
                "name":"sub node 5"
            },
            {
                "group":"s",
                "name":"sub node 6"
            },
            {
                "group":"s",
                "name":"sub node 7"
            },
            {
                "group":"s",
                "name":"sub node 8"
            },
            {
                "group":"s",
                "name":"sub node 9"
            },
            {
                "group":"s",
                "name":"sub node 10"
            },
            {
                "group":"s",
                "name":"sub node 11"
            },
            {
                "group":"r",
                "name":"sub node 12",
                "children":[
                    {
                        "group":"r",
                        "name":"sub sub node 1"
                    },
                    {
                        "group":"r",
                        "name":"sub sub node 2"
                    },
                    {
                        "group":"r",
                        "name":"sub sub node 3"
                    }
                ]
            }
        ]
    }
]
    </script>
</body>

CSS

circle.node {
	cursor: pointer;
	stroke: #34495e;
	stroke-width: 2px;
	box-sizing: border-box;
	stroke-location: inside;
}

line.link {
	fill: none;
	stroke: #34495e;
	stroke-width: 1.5px;
}

JavaScript

var w = 600,
	h = 600,
	radius = 10,
	node,
	link,
	root;

var force = d3.layout.force()
	.on("tick", tick)
	.charge(function(d) { return -500; })
	.linkDistance(function(d) { return d.target._children ? 100 : 50; })
	.size([w, h - 160]);

var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

root = words[0]; //set root node
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();

function update() {
	var nodes = flatten(root),
	links = d3.layout.tree().links(nodes);

	// Restart the force layout.
	force
		.nodes(nodes)
		.links(links)
		.start();

	// Update the links…
	link = svg.selectAll(".link")
		.data(links);

	// Enter any new links.
	link.enter().insert("svg:line", ".node")
		.attr("class", "link")
		.attr("x1", function(d) { return d.source.x; })
		.attr("y1", function(d) { return d.source.y; })
		.attr("x2", function(d) { return d.target.x; })
		.attr("y2", function(d) { return d.target.y; });

	// Exit any old links.
	link.exit().remove();

	// Update the nodes…
	node = svg.selectAll("circle.node")
		.data(nodes)
		.style("fill", color);

	node.transition()
		.attr("r", radius);	

	// Enter any new nodes.
	node.enter().append("svg:circle")
		.attr("class", "node")
		.attr("cx", function(d) { return d.x; })
		.attr("cy", function(d) { return d.y; })
		.attr("r", radius)
		.style("fill", color)
		.on("click", click)
		.call(force.drag);

	// Exit any old nodes.
	node.exit().remove();
    
  
    title = svg.selectAll("text.title")    
         .data(nodes);
    
    // Enter any new titles.
    title.enter()
        .append("text")
        .attr("class", "title")
      	.text(function(d) { return d.name; });
    
    // Exit any old titles.
    title.exit().remove();
}

function tick() {
	link.attr("x1", function(d) { return d.source.x; })
		.attr("y1", function(d) { return d.source.y; })
		.attr("x2", function(d) { return d.target.x; })
		.attr("y2", function(d) { return d.target.y; });

	node.attr("cx",...