A C++ port of the d3-heirarchy pack layout, intended for compilation into WebAssembly.
- Install and set up Emscripten
- Use
emcc
to compilecircle-pack.cpp
:
emcc circle-pack.cpp -O3 --bind -o index.html -s WASM=1 -s ALLOW_MEMORY_GROWTH=1
- Include the output
index.js
on your page or in your javascript bundle. index.js
will requestindex.wasm
, make sure it is available for download. If necessary, update the path toindex.wasm
inindex.js
.
The exported Hierarchy class exposes an interface very similar to d3-hierarchy.
options: {
size: [float, float]. Bounding rectangle of circle
padding: (optional, default 0) float or function, the distance between nodes
radius: (optional) function. Transform the radius of each node
}
hierarchy: {
value: relative size of node
children: [...nodes]
}
Performs the circle packing layout on the hierarchy. Returns the root node of the hierarchy.
class HNode {
double x;
double y;
double r;
HNodeVec children;
leaves()
}
To get the length of children
use, node.children.size()
. To get a child by index, use node.children.get(i)
. To get all leaf children, use node.leaves()
.
const rootNode = {
value: 100,
children: [
{
value: 200,
children: [
{ value: 50 },
{ value: 25 },
{ value: 700 }
]
}
]
}
const root = new Module.Hierarchy({
size: [width, width],
padding: 1.5
}, rootNode);
const packedChildren = root.pack().leaves();
for (var i = 0; i < packedChildren.size(); i++) {
canvas.drawCircle(packedChildren.get(i))
}