JSFiddle - React, Tailwind, and code Playground

by Chris Maloney

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://chrismaloney.org/d3-flextree/dist/d3-flextree.min.js"></script>
<h2>D3-Flextree Demo</h2>
This is the demo page for a reimplementation of 
the D3 tree layout algorithm that allows variable node sizes. See the <a href='http://github.com/klortho/d3-flextree'>klortho/d3-flextree</a>
repo for more information. 
</p>
<hr/>
<div id='drawing'></div>

JavaScript

var test_case = {
    "name": "test11",
        "description": "Simple tree to illustrate the effect of variable node sizes.",
        "tree": "tree-j.json",
        "sizing": "node-size-function",
        "gap": "spacing-0"
};

var tree = {
  "name": "root",
  "x_size": 20,
  "y_size": 70,
  "children": [
    {
      "name": "long",
      "x_size": 20,
      "y_size": 200,
      "children": [
        { 
          "name": "leaf0",
          "x_size": 20,
          "y_size": 70
        },
        { 
          "name": "leaf1",
          "x_size": 20,
          "y_size": 70
        }
      ]
    },
    {
      "name": "short",
      "x_size": 20,
      "y_size": 70,
      "children": [
        { 
          "name": "leaf2",
          "x_size": 20,
          "y_size": 70
        }
      ]
    }
  ]
};

var engine = d3.layout.flextree().setNodeSizes(true);

// gap
if (test_case.gap == "separation-1") {
    engine.separation(function (a, b) {
        return 1;
    });
} else if (test_case.gap == "spacing-0") {
    engine.spacing(function (a, b) {
        return 0;
    });
} else if (test_case.gap == "spacing-custom") {
    engine.spacing(function (a, b) {
        return a.parent == b.parent ? 0 : engine.rootXSize();
    })
}

// sizing
if (test_case.sizing == "node-size-function") {
    engine.nodeSize(function (t) {
        return [t.x_size, t.y_size];
    })
} else if (test_case.sizing == "node-size-fixed") {
    engine.nodeSize([50, 50]);
} else if (test_case.sizing == "size") {
    engine.size([200, 100]);
}


// First get the bag of nodes in the right order
var nodes = d3.layout.hierarchy()(tree);

// Then get started drawing, including, in the case of flare,
// the text for each node, which is needed to determine the
// node sizes, which are used in the layout algorithm.
var svg = d3.select("#drawing").append("div").append('svg');
var svg_g = svg.append("g");

var last_id = 0;
var node = svg_g.selectAll(".node")
    .data(nodes, function (d) {
    return d.id ||...