JSFiddle - React, Tailwind, and code Playground

by tms

CSS

.node {
  font: 10px sans-serif;
}

.link {
  stroke: steelblue;
  stroke-opacity: 0.5;
  fill: none;
  pointer-events: none;
}

JavaScript

var classes = [
{ name: "d.Disdain", imports: ["d.Loathing"] },
{ name: "d.Aversion", imports: ["d.Disdain", "d.Hate", "d.Repugnance"] },
{ name: "d.Detest", imports: [] },
{ name: "d.Abhorent", imports: ["d.Detest", "d.Revulsion"] },
{ name: "d.Revulsion", imports: [] },
{ name: "d.Repugnance", imports: ["d.Revulsion", "d.Abhorent"] },
{ name: "d.Loathing", imports: ["d.Detest", "d.Abhorent", "d.Revulsion", "d.Hate"] },
{ name: "d.Resentment", imports: [] },
{ name: "d.Malevolence", imports: ["d.Hate"] },
{ name: "d.Hate", imports: ["d.Abhorent", "d.Loathing", "d.Detest"] },
{ name: "d.Indignation", imports: ["d.Disdain", "d.Resentment"]}
];


var diameter = 960,
    radius = diameter / 2,
    innerRadius = radius - 120;

var cluster = d3.cluster()
    .size([360, innerRadius]);

var line = d3.radialLine()
    .curve(d3.curveBundle.beta(0.7))
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + radius + "," + radius + ")");

var link = svg.append("g").selectAll(".link"),
    node = svg.append("g").selectAll(".node");

// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
  var map = {};

  function find(name, data) {
    var node = map[name], i;
    if (!node) {
      node = map[name] = data || {name: name, children: []};
      if (name.length) {
        node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
        node.parent.children.push(node);
        node.key = name.substring(i + 1);
      }
    }
    return node;
  }

  classes.forEach(function(d) {
    find(d.name, d);
  });

  return d3.hierarchy(map[""]);
}

// Return a list of imports for the given array of nodes.
function packageImports(nodes) {
  var map = {},
      imports = [];

  // Compute a map from name to node.
  nodes.forEach(function(d) {
  ...