How to use the d3-hierarchy.cluster function in d3-hierarchy

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();

render: function() {
    let conv = this.props.conv;

    let fullHeight = 40;
    let fullWidth = this.props.widthBudget;
    let padding = 2;
    let height = fullHeight - padding * 2;
    let width = fullWidth - padding * 2;

    // -- generate cluster
    // Note that we want this oriented horizontally, so width/height and x/y
    // get flipped.
    let cluster = d3_hierarchy.cluster()
      .size([height, width]);
    let nodes = cluster.nodes(deriveConvHierarchy(conv.messageTidbits));

    // - X position fixup based on time.
    // The nodes have been laid out with a strict graph relationship.  But we
    // fancy ourselves clever and/or just think it would be cool to have the x
    // position determined by a logarithmic time mapping.  Because children
    // must come after their parent, we believe this to be sufficient to not be
    // a total mess.

    var now = Date.now();
    const DAY_MILLIS = 1000 * 60 * 60 * 24;
    const WEEK_MILLIS = 7 * DAY_MILLIS;
    const YEAR_MILLIS = 365 * DAY_MILLIS;
    var timePivots = [
      now - 10 * YEAR_MILLIS,

// has its X value calculated last.
    let currX = 0;

    for (let i = nodeHeightData.length - 1; i >= 0; i--) {
      let item = nodeHeightData[i];
      item.x = currX;
      currX = currX + item.maxWidth + (2 * NODE_OFFSET_SIZE);
    }

    // for debugging
    self.root = root;

    // Create the graph. The nodeSize() is [8,280] (width, height) because we 
    // want to change the orientation of the graph from top-down to left-right.
    // To do that we reverse X and Y for calculations and translations.
    let graph = cluster()
      .separation(() => 8)
      .nodeSize([9, 280]);

    function update(source) {
      graph(root);
      let nodes = root.descendants();
      let links = root.links();
      let node = g
        .selectAll(".node")
        .data(nodes, d => d.data.id);

      // The graph is laid out by graph() as vertically oriented
      // (the root is at the top). We want to show it as horizontally
      // oriented (the root is at the left). In addition, we want
      // each 'row' of nodes to show up as a column with the cells
      // aligned on their left edge at the cell's 0 point.

const applyCluster = d3Tree => {

  const layout = d3Hierarchy
    .cluster()
    .size([360, 1600])
    .separation((a, b) => {
      return (a.parent === b.parent ? 1: 2) / a.depth
    })

  // Apply layout and generate (x,y) positions
  layout(d3Tree)
}

if (!isArray(as) || as.length !== 2) {
    throw new TypeError('Invalid as: it must be an array with 2 strings (e.g. [ "x", "y" ])!');
  }

  let field: string | undefined = undefined;
  try {
    field = getField(options);
  } catch (e) {
    console.warn(e);
  }

  if (field) {
    root.sum((d: any) => d[field!]);
  }

  const clusterLayout = d3Hierarchy.cluster();
  clusterLayout.size(options.size);
  if (options.nodeSize) {
    clusterLayout.nodeSize(options.nodeSize);
  }
  if (options.separation) {
    clusterLayout.separation(options.separation);
  }
  clusterLayout(root);

  const x = as[0];
  const y = as[1];
  root.each((node: any) => {
    node[x] = node.x;
    node[y] = node.y;
  });
}

function createGenerator(props, generator?: Layout): Layout {
    generator = generator || d3.cluster();
    return args.reduce((acc: Layout, arg: string) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

export default function Cluster({
  top,
  left,
  className,
  root,
  size,
  nodeSize,
  separation,
  children,
  linkComponent = DefaultLink,
  nodeComponent = DefaultNode,
}) {
  const cluster = d3cluster();

  if (size) cluster.size(size);
  if (nodeSize) cluster.nodeSize(nodeSize);
  if (separation) cluster.separation(separation);

  const data = cluster(root);

  if (children) return children(data);

  return (
    
      {linkComponent &&
        data.links().map((link, i) => {
          return (
            {React.createElement(linkComponent, { link })}
          );

constructor() {
        super();
        ITree.call(this);
        Utility.SimpleSelectionMixin.call(this);

        this._drawStartPos = "origin";

        this._d3LayoutCluster = d3Cluster();
        this._d3LayoutTree = d3Tree();
    }