JSFiddle - React, Tailwind, and code Playground

by murray_3

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.js"></script>
<body>
    <div id="chart"></div>

</body>

CSS

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

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

path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

JavaScript

var data = {
    "name": "My Root", 
    "id": "0",   
    "children": [
        {
        "name": "first level child 1", 
        "id": "1_1",
        "children": [
            {
            "name": "second level child 1",                    "id": "2_1",
            "children": [
                {
                "name": "third level child 1",
                "id": "3_1",
                "size": 3938},
            {
                "name": "third level child 2", 
                "id": "3_2",
                "size": 3812}

            ]},
                    ]}
    ]
};


var w = 960,
    h = 800,
    i = 0,
    barHeight = 20,
    barWidth = w * .8,
    duration = 400,
    root;

var tree = d3.layout.tree().size([h, 100]);

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

var vis = d3.select("#chart").append("svg:svg").attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(20,30)");

data.x0 = 0;
data.y0 = 0;
update(root = data);

function update(source) {

    // Compute the flattened node list. TODO use d3.layout.hierarchy.
    var nodes = tree.nodes(root);

    // Compute the "layout".
    nodes.forEach(function(n, i) {
        n.x = i * barHeight;
    });

    // Update the nodes…
    var node = vis.selectAll("g.node").data(nodes, function(d) {
        return d.id || (d.id = ++i);
    });

    var nodeEnter = node.enter().append("svg:g").attr("class", "node").attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    }).style("opacity", 1e-6);

    // Enter any new nodes at the parent's previous position.
    nodeEnter.append("svg:rect").attr("y", -barHeight / 2).attr("height", barHeight).attr("width", barWidth).style("fill", color).on("click", click);

    nodeEnter.append("svg:text").attr("dy", 3.5).attr("dx", 5.5).text(function(d) {
        return d.name;
    });

    // Add checkbox
    nodeEnter.append("svg:circle").attr("r", 5).attr("fill",...