JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label><input type="radio" name="mode" value="radialtree">Radial Tree</label>
  <label><input type="radio" name="mode" value="radialcluster">Radial Cluster</label>
  <label><input type="radio" name="mode" value="tree">Tree</label>
  <label><input type="radio" name="mode" value="cluster" checked>Cluster</label>
</form>

CSS

label {
    font: 12px sans-serif;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node {
    font: 10px sans-serif;
}
.link {
    fill: none;
    stroke: #ccf;
    stroke-width: 1.5px;
}

JavaScript

var root; //store data in a variable accessible by all functions

d3.selectAll("input").on("change", change);

function change() {
  if (this.value === "radialtree") transitionToRadialTree();
  else if (this.value === "radialcluster") transitionToRadialCluster();
  else if (this.value === "tree") transitionToTree();
  else transitionToCluster();
};

//Radial Tree layout//
var diameter = 500;
var radialTree = d3.layout.tree()
    .size([360, diameter / 2 ])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var radialDiagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
function transitionToRadialTree() {
  var nodes = radialTree.nodes(root), //recalculate layout
      links = radialTree.links(nodes);
    
    svg.transition().duration(1500)
       .attr("transform", "translate(" + (diameter/2)
                 + "," + (diameter/2) + ")");
             //set appropriate translation (origin in middle of svg)
    
    link.data(links, function(d){
              return d.source.name + d.target.name;})
      .transition().duration(1500)
      .attr("d", radialDiagonal); //get the new radial path

  node.data(nodes, function(d){
              return d.name ;})
      .transition().duration(1500)
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) 

  node.select("circle")
      .transition().duration(1500)
      .attr("r", 4.5);

  node.select("text")
      .transition().duration(1500)
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
};

function transitionToRadialCluster() {
    alert("to radial cluster");
};

function transitionToTree() {
    alert("to tree");
};

function transitionToCluster() {
    alert("to cluster");
};

var width = 500,
    height = 500;

var cluster =...