JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "visualization">
	<button id = "button-toggle" style="float : right;">Toggle</button>
 </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

CSS

.node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

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

  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var width =1200,
height = 900,
root= {
  "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]
    },
    {
     "name": "optimization",
     "children": [
      {"name": "AspectRatioBanker", "size": 7074}
     ]
    }
   ]
  }
 ]

};
var force = d3.layout.force()
    .linkDistance(230)// link distance between the nodes
    .charge(-500)  // charge that repel nodes from each other
    .gravity(.05)
    .size([width, height])
    .on("tick", tick);

var svg = d3.select("#visualization").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");
//Fix the position of the nodes and doesnt allow them to move out of the screen
var drag = force.drag().on("dragstart", dragstart);

flatten(root); //to set ids
setParents(root, null);
collapseAll(root);
root.children = root._children;
root._children = null;
update();

function update() {
  var nodes = flatten(root),
      links = d3.layout.tree().links(nodes);
  // Restart the force layout.
  force
      .nodes(nodes)
      .links(links)
      .start();

  // Update links.
  link = link.data(links, function(d) { return d.target.id; });

  link.exit().remove();

  link.enter().insert("line", ".node")
      .attr("class", "link")
       .style("stroke-dasharray",function(d){
    
      if(d.target.group ==2)
     
    {
      return[0,2,1];
    
  }
})
   ...