JSFiddle - React, Tailwind, and code Playground

by b_g_v

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="verticaltree">Vertical Tree</label>
  <label><input type="radio" name="mode" value="verticalcluster">Vertical 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: tan;
    stroke-width: 1.5px;
}

JavaScript

var width = 500,
    height = 500;
var diameter = 300;
var duration = 2000;

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

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

function transitionToRadialTree() {

    var nodes = radialTree.nodes(root), // recalculate layout
        links = radialTree.links(nodes);
    
    svg.transition().duration(duration)
        .attr("transform", "translate(" + (width/2) + "," +
                                          (height/2) + ")");
        // set appropriate translation (origin in middle of svg)
    
    link.data(links)
        .transition()
        .duration(duration)
        .delay( function(d, i) { return 100 * i + 500 * d.source.depth; } )
        .style("stroke", "#fc8d62")
        .attr("d", radialDiagonal); //get the new radial path

};

function transitionToRadialCluster() {

    var nodes = radialCluster.nodes(root), // recalculate layout
        links = radialCluster.links(nodes);
    
    svg.transition().duration(duration)
        .attr("transform", "translate(" + (width/2) + "," +
                                          (height/2) + ")");
        // set appropriate translation (origin in middle of svg)
    
    link.data(links)
        .transition()
        .duration(duration)
        .delay( function(d, i) { return 100 * i + 500 * d.source.depth; } )
        .style("stroke", "#66c2a5")
        .attr("d", radialDiagonal); //get the new radial path

};

function transitionToVerticalTree() {
    
    var nodes = tree.nodes(root), //recalculate layout
        links = tree.links(nodes);

   ...