JSFiddle - React, Tailwind, and code Playground

by Chris Maloney

HTML

<script src="http://klortho.github.io/d3-flextree/d3/d3.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>This is an attempt to use circular nodes. It appears that the "engine.nodes(tree);" call depends on the existence of "x_size" and "y_size" in the tree datastructure. Here I define x_size/y_size as the diameter of the circle.
    <p>
        <hr/>
        <div id='drawing'></div>

CSS

#drawing {
    overflow: auto;
    resize: both;
}
svg { 
  border: 1px solid black; 
  font: 10px sans-serif;
}

.node circle {
  stroke: steelblue;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}

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": 70,
        "y_size": 70,
        "children": [{
        "name": "long",
            "x_size": 200,
            "y_size": 200,
            "children": [{
            "name": "leaf0",
                "x_size": 70,
                "y_size": 70
        }, {
            "name": "leaf1",
                "x_size": 100,
                "y_size": 100
        }]
    }, {
        "name": "short",
            "x_size": 40,
            "y_size": 40,
            "children": [{
            "name": "leaf2",
                "x_size": 10,
                "y_size": 10
        }]
    }]
};

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

// gap
if (test_case.gap == "separation-1") {
    engine.separation(function (a, b) {
        return a.parent == b.parent ? 1 : 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 =...