How to use the d3-shape.linkVertical function in d3-shape

const wrongLink2: Selection =
    select('.link-paths'); // mock

// Test DefaultLinkObject Interface ==================================================

let coordinates: [number, number];

coordinates = defaultLinkDatum.source;
coordinates = defaultLinkDatum.target;

// Test generator factories ==========================================================

let defaultLink: d3Shape.Link;

defaultLink = d3Shape.linkHorizontal();
defaultLink = d3Shape.linkVertical();

let link: d3Shape.Link, HierarchyPointNode>;

link = d3Shape.linkHorizontal, HierarchyPointNode>();
link = d3Shape.linkVertical, HierarchyPointNode>();

let svgLink: d3Shape.Link, HierarchyPointNode>;

svgLink = d3Shape.linkHorizontal, HierarchyPointNode>();
svgLink = d3Shape.linkVertical, HierarchyPointNode>();

let defaultLinkRadial: d3Shape.LinkRadial;

defaultLinkRadial = d3Shape.linkRadial();

let radialLink: d3Shape.LinkRadial, HierarchyPointNode>;

// Test generator factories ==========================================================

let defaultLink: d3Shape.Link;

defaultLink = d3Shape.linkHorizontal();
defaultLink = d3Shape.linkVertical();

let link: d3Shape.Link, HierarchyPointNode>;

link = d3Shape.linkHorizontal, HierarchyPointNode>();
link = d3Shape.linkVertical, HierarchyPointNode>();

let svgLink: d3Shape.Link, HierarchyPointNode>;

svgLink = d3Shape.linkHorizontal, HierarchyPointNode>();
svgLink = d3Shape.linkVertical, HierarchyPointNode>();

let defaultLinkRadial: d3Shape.LinkRadial;

defaultLinkRadial = d3Shape.linkRadial();

let radialLink: d3Shape.LinkRadial, HierarchyPointNode>;

radialLink = d3Shape.linkRadial, HierarchyPointNode>();

let svgLinkRadial: d3Shape.LinkRadial, HierarchyPointNode>;

svgLinkRadial = d3Shape.linkRadial, HierarchyPointNode>();

// Configure link generators ========================================================

let defaultNodeAccessor: (d: d3Shape.DefaultLinkObject, ...args: any[]) => [number, number];

makeDependencyLines(lines, lineClass) {
    const lineGenerator = linkVertical()
      .x(d => d[0])
      .y(d => d[1])
    this.depLineGrp
      .selectAll(`path.${lineClass}`)
      .data(
        lines
          .filter(line => line.src.type === line.dst.type)
          .map(line => this._lineConverter(line))
      )
      .enter()
      .append('path')
      .attr('class', d => `dep ${d.type} ${lineClass}`)
      .attr('d', lineGenerator)
      .attr('stroke-width', 5)
  }

if (b.circular && !a.circular) return 1
  const first = direction === "down" ? "y" : "x"
  const second = direction === "down" ? "x" : "y"

  return a.source[first] === b.source[first]
    ? a.sankeyWidth === b.sankeyWidth
      ? a.source[second] - b.source[second]
      : b.sankeyWidth - a.sankeyWidth
    : a.source[first] - b.source[first]
}

const sigmoidLinks = {
  horizontal: linkHorizontal()
    .x(d => d.x)
    .y(d => d.y),
  vertical: linkVertical()
    .x(d => d.x)
    .y(d => d.y),
  radial: glyphD.lineArc
}

const customEdgeHashD = {
  curve: (d, projection = "vertical") => sigmoidLinks[projection](d),
  linearc: d => glyphD.lineArc(d),
  ribbon: d => glyphD.ribbon(d, d.width),
  arrowhead: d =>
    glyphD.arrowHead(d, d.target.nodeSize, d.width, d.width * 1.5),
  halfarrow: d =>
    glyphD.halfArrow(d, d.target.nodeSize, d.width, d.width * 1.5),
  nail: d => glyphD.nail(d, d.source.nodeSize),
  comet: d => glyphD.comet(d, d.target.nodeSize),
  taffy: d =>

  path: (xScale, yScale) => linkVertical().x(d => xScale(d)).y(d => yScale(d)),
  offset: ({width, height}) => ''

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

.attrs({
      x: x,
      y: y + 3 / scale,
      fill: `hsl(${node.hue}, 70%, 60%)`,
      'text-anchor': 'middle',
      'alignment-baseline': 'hanging',
    })
    .styles({
      'font-family': 'sans-serif',
      'font-size': (12 / scale) + 'pt',
    })
    .text(node.id);

  if (parent) {
    drawing.append('path')
      .attr('d', linkVertical()({
        source: [parent.x, parent.y + parent.size[1] - paddingBottom],
        target: [node.x, node.y],
      }));
  }
  for (const kid of (node.children || [])) drawSubtree(kid, context, node);
}

if (this.connector === 'elbow') {

            const source = { x: pointLink.source.x + (this.nodeWidth / 2), y: pointLink.source.y + this.nodeHeight };
            const target = { x: pointLink.target.x + (this.nodeWidth / 2), y: pointLink.target.y };

            return 'M' + source.x + ',' + (source.y) +
                'v' + ((target.y - source.y) / 2) +
                'h' + (target.x - source.x) +
                'v' + ((target.y - source.y) / 2);

        } else {

            const source = { x: pointLink.source.x + (this.nodeWidth / 2), y: pointLink.source.y + (this.nodeHeight / 2) };
            const target = { x: pointLink.target.x + (this.nodeWidth / 2), y: pointLink.target.y + (this.nodeHeight / 2) };

            return linkVertical()({ source: [source.x, source.y], target: [target.x, target.y] });
        }
    }