JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<div id="form">
    <button id="button">Foo</button>
</div>
<div id="box"></div>

CSS

svg {
    pointer-events: all;
}
.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

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

JavaScript

var realWidth = window.innerWidth;
var realHeight = window.innerHeight;

var m = [40, 240, 40, 240],
    w = realWidth -m[0] -m[0],
    h = realHeight -m[0] -m[2],
    i = 0,
    root;

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

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

var vis = d3.select("#box").append("svg:svg")
    .attr("class","svg_container")
    .attr("width", w)
    .attr("height", h)
    .style("overflow", "scroll")
    .style("background-color","#EEEEEE")
  .append("svg:g")
    .attr("class","drawarea")
  .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var botao = d3.select("#form #button");


function loadData(json) {
    root = json;
    d3.select("#processName").html(root.text);
    root.x0 = h / 2;
    root.y0 = 0;
    botao.on("click", function(){toggle(root); update(root);});
    
    update(root);  
}

function update(source) {
    var duration = d3.event && d3.event.altKey ? 5000 : 500;
    
    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse();
    console.warn(nodes)
    
    // Normalize for fixed-depth.
    nodes.forEach(function(d) { d.y = d.depth * 50; });
    
    // Update the nodes…
    var node = vis.selectAll("g.node")
    .data(nodes, function(d) { return d.id || (d.id = ++i); });
    
    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
    .on("click", function(d) { toggle(d); update(d); });
    
    nodeEnter.append("svg:circle")
    .attr("r", function(d){ 
        return  Math.sqrt((d.part_cc_p*1))+4;
    })
    .attr("class", function(d) { return "level"+d.part_level; })
    .style("stroke", function(d){
        if(d._children){return "blue";}
    })    
    ;
    
    nodeEnter.append("svg:text")
    .attr("x", function(d) { return...