JSFiddle - React, Tailwind, and code Playground

by Teppo Jussmäki

HTML

<script src="https://d3js.org/topojson.v1.min.js"></script>

CSS

.node {
		cursor: pointer;
	}

	.node circle {
	  fill: #fff;
	  stroke: steelblue;
	  stroke-width: 3px;
	}

	.node text {
	  font: 12px sans-serif;
    
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                 not supported by any browser */
}
  
  
svg {
  border: 1px #000000 solid;
  }

	.link {
	  fill: none;
	  stroke: #ccc;
	  stroke-width: 2px;
	}
  .vor0 {
	  fill: #fff;
    fill-opacity: 0.2;
    stroke: #000;
    stroke-width: 0px;
  }
  .vor1 {
	  fill: #ff4;
  }
  .vor2 {
	  fill: #f4f;
  }
  .vor3 {
	  fill: #4ff;
  }

JavaScript

var margin = {top: 20, right: 120, bottom: 20, left: 120};
var width = 700 - margin.right - margin.left;
var height = 500 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .size([height, width]);

//var diagonal = d3.svg.diagonal()
//	.projection(function(d) { return [d.y, d.x]; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });


var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 5])
    .on("zoom", zoomed);
var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    //.on("dragstart", dragstarted)
    .on("drag", dragged);
 //   .on("dragend", dragended);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")")
    .call(zoom);

var rect = svg.insert("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all");
var container = svg.append("g");

var smoothline = d3.svg.line()
    .interpolate("basis-closed");//("basis-closed");


/*var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                24, 18, 25, 9, 3 ];
d3.select("body").selectAll("div")
    .data(dataset)  // <-- The answer is here!
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        var barHeight = d * 5;
        return barHeight + "px";
    });
*/

/*var treeData = [
  {
    "name": "Top Level",
    "parent": "null",
    "group": 1,
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "group": 2,
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A",
            "group": 2,
          },
          {
            "name": "Daughter of A",
            "parent": "Level...