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="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 === "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)
        .style("stroke", "#fc8d62")
        .attr("d", radialDiagonal); //get the new radial path

    node.data(nodes)
        .transition()
        .duration(duration)
        .attr("transform", function(d) {
            return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
        });
    
    node.select("circle")
        .transition()
        .duration(duration)
        .style("stroke", "#984ea3");
    
};

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)
        .style("stroke", "#66c2a5")
        .attr("d", radialDiagonal); //get the new radial path

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