How to use d3-hierarchy - 10 common examples

}

let tabularData: Array;
tabularData = [
    { name: 'n0', parentId: null, val: 10 },
    { name: 'n11', parentId: 'n0', val: 5 },
    { name: 'n12', parentId: 'n0', val: 4 },
    { name: 'n121', parentId: 'n12', val: 30 }
];

let idStringAccessor: (d: TabularHierarchyDatum, i?: number, data?: Array) => (string | null | '' | undefined);

// Create Stratify Operator  ---------------------------------------------

let stratificatorizer: d3Hierarchy.StratifyOperator;
stratificatorizer = d3Hierarchy.stratify();

// Configure Stratify Operator  ------------------------------------------

// id(...)

stratificatorizer = stratificatorizer.id(function (d, i, data) {
    console.log('Length of tabular array: ', data.length);
    console.log('Name of first entry in tabular array: ', data[0].name); // data of type Array
    return d.name; // d is of type TabularHierarchyDatum
});

idStringAccessor = stratificatorizer.id();

// parentId(...)

stratificatorizer = stratificatorizer.parentId(function (d, i, data) {

// Configure treemap layout generator ====================================

// tile() ----------------------------------------------------------------

treemapLayout = treemapLayout.tile(function (node, x0, y0, x1, y1) {
    let n: number;
    console.log('x0 coordinate of node: ', node.x0);
    console.log('Node parent id: ', node.data.parentId); // type of node is HierarchyRectangularNode
    num = x0; // number
    num = y0; // number
    num = x1; // number
    num = y1; // number
    // tile away
});

treemapLayout = treemapLayout.tile(d3Hierarchy.treemapDice);

let tilingFn: (node: d3Hierarchy.HierarchyRectangularNode, x0: number, y0: number, x1: number, y1: number) => void;
tilingFn = treemapLayout.tile();

// size() ----------------------------------------------------------------

treemapLayout = treemapLayout.size(null);
treemapLayout = treemapLayout.size([400, 200]);

size = treemapLayout.size();

// round() ------------------------------------------------------------

treemapLayout = treemapLayout.round(true);

let roundFlag: boolean = treemapLayout.round();

// Configure treemap layout generator ====================================

// tile() ----------------------------------------------------------------

treemapLayout = treemapLayout.tile(function (node, x0, y0, x1, y1) {
    let n: number;
    console.log('x0 coordinate of node: ', node.x0);
    console.log('Node parent id: ', node.data.parentId); // type of node is HierarchyRectangularNode
    num = x0; // number
    num = y0; // number
    num = x1; // number
    num = y1; // number
    // tile away
});

treemapLayout = treemapLayout.tile(d3Hierarchy.treemapDice);

let tilingFn: (node: d3Hierarchy.HierarchyRectangularNode, x0: number, y0: number, x1: number, y1: number) => void;
tilingFn = treemapLayout.tile();

// size() ----------------------------------------------------------------

treemapLayout = treemapLayout.size(null);
treemapLayout = treemapLayout.size([400, 200]);

size = treemapLayout.size();

// round() ------------------------------------------------------------

treemapLayout = treemapLayout.round(true);

let roundFlag: boolean = treemapLayout.round();

idStringAccessor = stratificatorizer.parentId();

// Use Stratify Operator  ------------------------------------------------

let stratifiedRootNode: d3Hierarchy.HierarchyNode = stratificatorizer(tabularData);

// -----------------------------------------------------------------------
// Cluster
// -----------------------------------------------------------------------

// Create cluster layout generator =======================================

let clusterLayout: d3Hierarchy.ClusterLayout;

clusterLayout = d3Hierarchy.cluster();

// Configure cluster layout generator ====================================

// size() ----------------------------------------------------------------

clusterLayout = clusterLayout.size(null);
clusterLayout = clusterLayout.size([200, 200]);

size = clusterLayout.size();

// nodeSize() ------------------------------------------------------------

clusterLayout = clusterLayout.nodeSize(null);
clusterLayout = clusterLayout.nodeSize([10, 10]);
size = clusterLayout.nodeSize();

idStringAccessor = stratificatorizer.parentId();

// Use Stratify Operator  ------------------------------------------------

let stratifiedRootNode: d3Hierarchy.HierarchyNode = stratificatorizer(tabularData);

// -----------------------------------------------------------------------
// Cluster
// -----------------------------------------------------------------------

// Create cluster layout generator =======================================

let clusterLayout: d3Hierarchy.ClusterLayout;

clusterLayout = d3Hierarchy.cluster();

// Configure cluster layout generator ====================================

// size() ----------------------------------------------------------------

clusterLayout = clusterLayout.size(null);
clusterLayout = clusterLayout.size([200, 200]);

size = clusterLayout.size();

// nodeSize() ------------------------------------------------------------

clusterLayout = clusterLayout.nodeSize(null);
clusterLayout = clusterLayout.nodeSize([10, 10]);
size = clusterLayout.nodeSize();

tilingFn = d3Hierarchy.treemapSlice;

tilingFn = d3Hierarchy.treemapSliceDice;

// Tiling Factory functions treemapSquarify() and treemapResquarify() ====

let tilingFactoryFn: d3Hierarchy.RatioSquarifyTilingFactory;

tilingFactoryFn = d3Hierarchy.treemapSquarify;
tilingFactoryFn = d3Hierarchy.treemapSquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapSquarify.ratio(2));

tilingFactoryFn = d3Hierarchy.treemapResquarify;
tilingFactoryFn = d3Hierarchy.treemapResquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapResquarify.ratio(2));


// Use HierarchyRectangularNode ================================================

// x and y coordinates ---------------------------------------------------

num = treemapRootNode.x0;
num = treemapRootNode.y0;
num = treemapRootNode.x1;
num = treemapRootNode.y1;

// data, depth, height ---------------------------------------------------

let treemapDatum: HierarchyDatumWithParentId = treemapRootNode.data;

tilingFn = d3Hierarchy.treemapDice;

tilingFn = d3Hierarchy.treemapSlice;

tilingFn = d3Hierarchy.treemapSliceDice;

// Tiling Factory functions treemapSquarify() and treemapResquarify() ====

let tilingFactoryFn: d3Hierarchy.RatioSquarifyTilingFactory;

tilingFactoryFn = d3Hierarchy.treemapSquarify;
tilingFactoryFn = d3Hierarchy.treemapSquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapSquarify.ratio(2));

tilingFactoryFn = d3Hierarchy.treemapResquarify;
tilingFactoryFn = d3Hierarchy.treemapResquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapResquarify.ratio(2));


// Use HierarchyRectangularNode ================================================

// x and y coordinates ---------------------------------------------------

num = treemapRootNode.x0;
num = treemapRootNode.y0;
num = treemapRootNode.x1;
num = treemapRootNode.y1;

// data, depth, height ---------------------------------------------------

tilingFn = d3Hierarchy.treemapDice;

tilingFn = d3Hierarchy.treemapSlice;

tilingFn = d3Hierarchy.treemapSliceDice;

// Tiling Factory functions treemapSquarify() and treemapResquarify() ====

let tilingFactoryFn: d3Hierarchy.RatioSquarifyTilingFactory;

tilingFactoryFn = d3Hierarchy.treemapSquarify;
tilingFactoryFn = d3Hierarchy.treemapSquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapSquarify.ratio(2));

tilingFactoryFn = d3Hierarchy.treemapResquarify;
tilingFactoryFn = d3Hierarchy.treemapResquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapResquarify.ratio(2));


// Use HierarchyRectangularNode ================================================

// x and y coordinates ---------------------------------------------------

num = treemapRootNode.x0;
num = treemapRootNode.y0;
num = treemapRootNode.x1;
num = treemapRootNode.y1;

// data, depth, height ---------------------------------------------------

tilingFn = d3Hierarchy.treemapSliceDice;

// Tiling Factory functions treemapSquarify() and treemapResquarify() ====

let tilingFactoryFn: d3Hierarchy.RatioSquarifyTilingFactory;

tilingFactoryFn = d3Hierarchy.treemapSquarify;
tilingFactoryFn = d3Hierarchy.treemapSquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapSquarify.ratio(2));

tilingFactoryFn = d3Hierarchy.treemapResquarify;
tilingFactoryFn = d3Hierarchy.treemapResquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapResquarify.ratio(2));


// Use HierarchyRectangularNode ================================================

// x and y coordinates ---------------------------------------------------

num = treemapRootNode.x0;
num = treemapRootNode.y0;
num = treemapRootNode.x1;
num = treemapRootNode.y1;

// data, depth, height ---------------------------------------------------

let treemapDatum: HierarchyDatumWithParentId = treemapRootNode.data;
num = treemapRootNode.depth;
num = treemapRootNode.height;

tilingFn = d3Hierarchy.treemapSlice;

tilingFn = d3Hierarchy.treemapSliceDice;

// Tiling Factory functions treemapSquarify() and treemapResquarify() ====

let tilingFactoryFn: d3Hierarchy.RatioSquarifyTilingFactory;

tilingFactoryFn = d3Hierarchy.treemapSquarify;
tilingFactoryFn = d3Hierarchy.treemapSquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapSquarify.ratio(2));

tilingFactoryFn = d3Hierarchy.treemapResquarify;
tilingFactoryFn = d3Hierarchy.treemapResquarify.ratio(2);

treemapLayout.tile(d3Hierarchy.treemapResquarify.ratio(2));


// Use HierarchyRectangularNode ================================================

// x and y coordinates ---------------------------------------------------

num = treemapRootNode.x0;
num = treemapRootNode.y0;
num = treemapRootNode.x1;
num = treemapRootNode.y1;

// data, depth, height ---------------------------------------------------

let treemapDatum: HierarchyDatumWithParentId = treemapRootNode.data;