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

function generateTreemapLayout(height, width, rootBranch, otherBranches) {
  const rootBranchWeight = rootBranch.slice(1).reduce((acc, row) => {
    return (row.weight || 1) + acc;
  }, 0) + rootBranch.length;
  const structuredInput = hierarchy({children: [{
    weight: rootBranchWeight,
    idx: 0
  }].concat(otherBranches.map((d, idx) => ({
    weight: d.weight,
    idx: idx + 1
  })))}).sum(d => d.weight);
  const treemapingFunction = treemap(treemapLayout)
    .tile(treemapLayout)
    // TODO should be in proportion to the sizing of the container
    .size([width, height])
    .paddingInner(0.05 * width);
  return treemapingFunction(structuredInput).descendants().slice(1);
}

const as = options.as;
  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;
  try {
    field = getField(options);
  } catch (e) {
    console.warn(e);
  }
  if (field) {
    root.sum((d) => d[field]);
  }

  const treemapLayout = d3Hierarchy.treemap();
  treemapLayout
    .tile(d3Hierarchy[options.tile])
    .size(options.size)
    .round(options.round)
    .padding(options.padding)
    .paddingInner(options.paddingInner)
    .paddingOuter(options.paddingOuter)
    .paddingTop(options.paddingTop)
    .paddingRight(options.paddingRight)
    .paddingBottom(options.paddingBottom)
    .paddingLeft(options.paddingLeft);
  treemapLayout(root);

  /*
   * points:
   *   3  2

}
      for (let host = 0; host < hostCount; host++) {
        zoneData.children.push({
          value: 1,
          height: randomHostHeight(),
          threatLevel: randomThreatLevel(),
          ip: `${random(1, 255)}.${random(1, 255)}.${random(1, 255)}.${random(1, 255)}`
        })
      }
      data.children.push(zoneData)
    }

    let layoutSideLength
    let zoneHierarchy = hierarchy(data).sum(d => d.value)
    layoutSideLength = Math.sqrt(zoneHierarchy.leaves().length) * 3
    let layout = this._treemapLayout || (this._treemapLayout = treemap().padding(2).tile(treemapResquarify))
    layout.size([layoutSideLength, layoutSideLength])
    layout(zoneHierarchy)

    this._hostsChanged = true
    this.setState({
      data: data,
      layoutSideLength,
      center: [layoutSideLength / 2, layoutSideLength / 2],
      hierarchy: zoneHierarchy,
      isLoading: false
    })
    console.log(`Generated ${zoneHierarchy.children.length} zones with ${zoneHierarchy.leaves().length} hosts`)
  }

export default function(nodes, v) {

  var treemap = d3Hierarchy.treemap()
      .size([v.size[0] - margin(v, "left") - margin(v, "right"), v.size[1] - margin(v, "top") - margin(v, "bottom")])
      .padding(v.padding);

  var stratify = d3Hierarchy.stratify()
      .parentId(function(d) { return d.___parent_id; });

  nodes.forEach(function(d, i) {
    d.id = "_" + i;
    d.___parent_id = "_x";
  })

  var extra = [{"id": "_x", "___parent_id": ""}];

  var root = stratify(nodes.concat(extra))
      .sum(function(d) { return d.___parent_id === "" ? 0: 1; });

({ width, height, tile, innerPadding, outerPadding }) => ({
            treemap: d3Treemap()
                .size([width, height])
                .tile(treeMapTileFromProp(tile))
                .round(true)
                .paddingInner(innerPadding)
                .paddingOuter(outerPadding),
        })
    ),

const TreeMapD3 = () => {
    const treemap = Treemap()

    return {
        /**
         *
         * @param {number}   width
         * @param {number}   height
         * @param {object}   _root
         * @param {string}   tile
         * @param {number}   innerPadding
         * @param {number}   outerPadding
         * @param {string}   identityProperty
         * @param {function} valueAccessor
         * @param {function} color
         */
        compute({
            width,

constructor(svg: SVGElement) {
    super(svg);
    this.treemap = treemap().paddingInner(2);
    this.margin = NO_MARGINS;

    this.canvas = select(svg).classed("treemap", true);
    this.cells = this.canvas.selectAll("g");
    this.labels = this.cells.append("text");
  }

function treemapLayout() {
  var x = treemap();
  x.ratio = function(_) {
    var t = x.tile();
    if (t.ratio) x.tile(t.ratio(_));
  };
  x.method = function(_) {
    if (Tiles.hasOwnProperty(_)) x.tile(Tiles[_]);
    else error('Unrecognized Treemap layout method: ' + _);
  };
  return x;
}

}));
      }
      return mappedNodes;
    }
    if (mode === 'circlePack') {
      const packingFunction = pack()
        .size([innerWidth, innerHeight])
        .padding(padding);
      const structuredInput = hierarchy(data)
        .sum(getSize)
        .sort((a, b) => sortFunction(a, b, getSize));
      return packingFunction(structuredInput).descendants();
    }

    const tileFn = TREEMAP_TILE_MODES[mode];
    const treemapingFunction = treemap(tileFn)
      .tile(tileFn)
      .size([innerWidth, innerHeight])
      .padding(padding);
    const structuredInput = hierarchy(data)
      .sum(getSize)
      .sort((a, b) => sortFunction(a, b, getSize));
    return treemapingFunction(structuredInput).descendants();
  }

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