JSFiddle - React, Tailwind, and code Playground

by ramnathv

CSS

path.link, .node rect {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}

.node rect {
  fill: white;
}

.text rect {
  fill: #eee;
  stroke: none;
}

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

JavaScript

// useful tree function from mike bostock
tree(
  {name: "selection", children: [
    {name: "parentNode: html", children: [
      {name: "td", children: [{type: "text", name: "0"}]},
      {name: "td", children: [{type: "text", name: "1"}]},
      {name: "td", children: [{type: "text", name: "2"}]},
      {name: "td", children: [{type: "text", name: "3"}]},
      {name: "td", children: [{type: "text", name: "4"}]},
      {name: "td", children: [{type: "text", name: "5"}]},
      {name: "td", children: [{type: "text", name: "6"}]},
      {name: "td", children: [{type: "text", name: "7"}]},
      {name: "td", children: [{type: "text", name: "8"}]},
      {name: "td", children: [{type: "text", name: "9"}]},
      {name: "td", children: [{type: "text", name: "10"}]},
      {name: "td", children: [{type: "text", name: "11"}]},
      {name: "td", children: [{type: "text", name: "12"}]},
      {name: "td", children: [{type: "text", name: "13"}]},
      {name: "td", children: [{type: "text", name: "14"}]},
      {name: "td", children: [{type: "text", name: "15"}]}
    ]}
  ]},
  390
);

function tree(root, outerHeight) {
  var margin = {top: 0, right: 440, bottom: 0, left: 40},
      width = 960 - margin.right,
      height = outerHeight - margin.top - margin.bottom,
      step = 120;

  var tree = d3.layout.tree()
      .size([height, 1])
      .separation(function() { return 1; });

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin", "1em 0 1em " + -margin.left + "px");

  var g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var nodes = tree.nodes(root);

  var link = g.selectAll(".link")
      .data(tree.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", d3.svg.diagonal()
      .source(function(d) { return {y: d.source.depth * step, x: d.source.x};...