prettybt
Simple binary tree visualizer
Usage
Browser
<body>
<!-- always use a specific commit hash -->
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@f55c8c5/js/pbt.js"></script>
<script>
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var tree = {val: 1, left: {val: 2}, right: {val: 3}};
// or: var tree = PrettyBT.treeFromString("[a,b,c,,d]");
PrettyBT.drawBinaryTree(canvas, tree, {size: 17});
</script>
</body>Making an SVG with canvas2svg
<body>
<script src="https://cdn.jsdelivr.net/gh/gliffy/canvas2svg@eaab317/canvas2svg.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@f55c8c5/js/pbt.js"></script>
<script>
var tree = PrettyBT.randomTree();
var dimensions = PrettyBT.computeDimensions(tree);
var canvas = (function () {
var ctx = new C2S(dimensions.width, dimensions.height);
return {
getContext: function () {
return ctx;
}
};
})();
PrettyBT.drawBinaryTree(canvas, tree);
var svg = document.createElement("div");
document.body.appendChild(svg);
svg.outerHTML = canvas.getContext().getSerializedSvg();
</script>
</body>NodeJS with canvas
const {createCanvas} = require("canvas"); // tested with 2.11.2
const PrettyBT = require("prettybt");
const canvas = createCanvas();
const tree = PrettyBT.randomTree();
PrettyBT.drawBinaryTree(canvas, tree);
console.log(`<img src="${canvas.toDataURL()}" />`);