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

.attr('class', 'chart')
      .style('width', `${w}px`)
      .style('height', `${h}px`)
      .append('svg:svg')
      .attr('width', w)
      .attr('height', h);

    // Add padding between multiple visualizations
    if (i !== data.length - 1 && data.length > 1) {
      viz.style('padding-bottom', '3px');
    }
    if (i !== 0 && data.length > 1) {
      viz.style('padding-top', '3px');
    }

    const root = hierarchy(datum);

    function hasDateNode(n) {
      return metrics.indexOf(n.data.name) >= 0 && hasTime;
    }

    // node.name is the metric/group name
    // node.disp is the display value
    // node.value determines sorting order
    // node.weight determines partition height
    // node.sum is the sum of children weights
    root.eachAfter(n => {
      n.disp = n.data.val;
      n.value = n.disp < 0 ? -n.disp : n.disp;
      n.weight = n.value;
      n.name = n.data.name;
      // If the parent is a metric and we still have

private setDataset(dataset: Readonly): void {

        // convert the segments to a hierarchichal structure
        const segmentHierarchy = hierarchy(dataset)
            .sum(this.getSegmentValue); // calculate segment values based on their children

        // store the processed segments
        const root = partition()(segmentHierarchy) as HierarchyRectangularNode;

        // store the flattened form of the segments
        this._segments = root.descendants();

        // mark the root node as focusable
        this._focusableSegment = root;

        // we need to run change detection here so the `*ngFor` will update and add all the segments to the DOM
        this._changeDetector.detectChanges();

        // select all the segments within the chart
        this._segmentsSelection = select(this._elementRef.nativeElement)

export const computeGraphLayout = state => {
  const useNullLayout = state.get('data').size <= 1;
  const graphLayout = state.getIn(['configs', GRAPH_LAYOUT_CONFIG]);
  const {height, width} = state.get('graphPanelDimensions').toJS();
  const tree = state.get('tree');
  if (!tree) {
    return {descendants: () => [], links: () => []};
  }
  const usedLayout = layouts[useNullLayout ? 'null' : graphLayout];
  const treeEval = usedLayout.layout({height, width}, state.get('branchModel').toJS());
  const preppedTree = usedLayout.preheirarchyManipulation ?
    usedLayout.preheirarchyManipulation(Immutable.fromJS(tree).toJS()) : tree;
  // footwork required to address hierarchy weirdness in which data is not seen
  // as something to be preserved and so it can be shoved it a data: {data: } situation
  // after hierarchy traversal. hierarchy is necessary to get the linkages so uhhh don't touch
  const preTree = hierarchy(preppedTree);
  preTree.each(d => {
    d.data = d.data.data;
  });
  return treeEval(preTree);
};

compute({ width, height, root: _root, leavesOnly, identity, value, padding, color }) {
            pack.size([width, height]).padding(padding)

            const root = hierarchy(_root).sum(value)

            pack(root)

            const nodes = leavesOnly ? root.leaves() : root.descendants()

            return nodes.map(d => {
                d.color = color({ ...d.data, depth: d.depth })
                // if (d.depth > 1) {
                //     d.color = color(d.parentId)
                // } else {
                //     d.color = color(identity(d.data))
                // }

                d.data.key = d.ancestors().map(a => identity(a.data)).join('.')

                return d

.then(data => {
        this.setState({
          data: nodesEdgesFromHierarchy(hierarchy(data))
        })
      })
  }

update(_domNode, _element) {
        HTMLWidget.prototype.update.apply(this, arguments);

        this._palette = this._palette.switch(this.paletteID());
        if (this.useClonedPalette()) {
            this._palette = this._palette.cloneNotExists(this.paletteID() + "_" + this.id());
        }

        const root = d3Hierarchy(this.treemapData())
            .sum(function (d) {
                return d.size || 50;
            })
            ;

        this._d3Treemap
            .size([this.width(), this.height()])
            ;
        this._d3Treemap(root);

        this._elementDIV
            .style("font-size", this.fontSize_exists() ? this.fontSize() + "px" : null)
            .style("line-height", this.fontSize_exists() ? (this.fontSize() + 2) + "px" : null)
            ;

        const context = this;

private setAmountOfNodes() {
		const map: CodeMapNode = this.codeMapPreRenderService.getRenderMap()
		this._viewModel.amountOfNodes = hierarchy(map).descendants().length
	}

processData(data) {
    const partition = d3_partition();
    const root = d3_hierarchy(data.root || data);
    root.sum(d => d.size);
    this.nodes = partition(root).descendants();
  }

private computeMargin(areaMetric: string, map: CodeMapNode): number {
		let leaves = hierarchy(map).leaves()
		let numberOfBuildings = 0
		let totalArea = 0

		leaves.forEach((node: HierarchyNode) => {
			numberOfBuildings++
			if (node.data.attributes && node.data.attributes[areaMetric]) {
				totalArea += node.data.attributes[areaMetric]
			}
		})

		let margin: number = AreaSettingsPanelController.MARGIN_FACTOR * Math.round(Math.sqrt(totalArea / numberOfBuildings))
		return Math.min(AreaSettingsPanelController.MAX_MARGIN, Math.max(AreaSettingsPanelController.MIN_MARGIN, margin))
	}
}