How to use the d3-chord.ribbon function in d3-chord

num = chordSubgroup.endAngle;
num = chordSubgroup.value;
num = chordSubgroup.index;

// ---------------------------------------------------------------------
// Test Ribbon
// ---------------------------------------------------------------------

// ribbon() create RibbonGenerator =====================================

let canvasRibbon: d3Chord.RibbonGenerator;
canvasRibbon = d3Chord.ribbon();

let svgRibbon: d3Chord.RibbonGenerator;

svgRibbon = d3Chord.ribbon();

// Configure RibbonGenerator ===========================================

// context() -----------------------------------------------------------

if (context) {
    canvasRibbon = canvasRibbon.context(context);
}

context = canvasRibbon.context();

svgRibbon = svgRibbon.context(null);

// source() -----------------------------------------------------------

svgRibbon = svgRibbon.source(d => {

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

export default function Ribbon({
  chord,
  source,
  target,
  radius,
  startAngle,
  endAngle,
  children,
  className,
  ...restProps
}: RibbonProps & Omit, keyof RibbonProps>) {
  const ribbon = d3ribbon();
  if (source) ribbon.source(source);
  if (target) ribbon.target(target);
  if (radius) setNumberOrNumberAccessor(ribbon.radius, radius);
  if (startAngle) setNumberOrNumberAccessor(ribbon.startAngle, startAngle);
  if (endAngle) setNumberOrNumberAccessor(ribbon.endAngle, endAngle);
  const path = ribbon(chord) as any;
  if (children) return <>{children({ path })};

  return

renderChords (parentElement, name, conf, data, instance, getCoordinates) {
    const track = parentElement.append('g')

    const link = track
      .selectAll('.chord')
      .data(data)
      .enter().append('path')
      .attr('class', 'chord')
      .attr('d', ribbon()
        .source((d) => getCoordinates(d.source, instance._layout, this.conf, d))
        .target((d) => getCoordinates(d.target, instance._layout, this.conf, d))
      )
      .attr('opacity', conf.opacity)
      .on('mouseover', (d) => {
        this.dispatch.call('mouseover', this, d)
        instance.clipboard.attr('value', conf.tooltipContent(d))
      })
      .on('mouseout', (d) =>
        this.dispatch.call('mouseout', this, d)
      )

    Object.keys(conf.events).forEach((eventName) => {
      link.on(eventName, function (d, i, nodes) { conf.events[eventName](d, i, nodes, event) })
    })

const svgElement = document.querySelector(`.${this.key}`);
    svgElement.innerHTML = '';

    const svg = d3_select(svgElement)
      .attr('width', parentWidth)
      .attr('height', parentHeight);

    const chord = d3_chord()
      .padAngle(0.05)
      .sortSubgroups(d3_descending);

    const arc = d3_arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    const ribbon = d3_ribbon().radius(innerRadius);

    const xTranslate = width / 2 + margin.left;
    const yTranslate = height / 2 + margin.top;

    const container = svg
      .append('g')
      .attr('transform', `translate(${xTranslate}, ${yTranslate})`)
      .datum(chord(orgMatrix));

    const group = container
      .append('g')
      .attr('class', 'groups')
      .selectAll('g')
      .data(chords => chords.groups)
      .enter()
      .append('g');

const innerRadius = outerRadius - 12;

    const svg = d3_select(className)
      .append('svg')
          .attr('width', width + margin.left + margin.right)
          .attr('height', height + margin.top + margin.bottom);

    const chord = d3_chord()
      .padAngle(0.05)
      .sortSubgroups(d3_descending);

    const arc = d3_arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    const ribbon = d3_ribbon()
      .radius(innerRadius);

    const xTranslate = (width / 2) + margin.left;
    const yTranslate = (height / 2) + margin.top;

    const container = svg.append('g')
      .attr('transform', `translate(${xTranslate}, ${yTranslate})`)
      .datum(chord(orgMatrix));

    const group = container.append('g')
      .attr('class', 'groups')
      .selectAll('g')
      .data((chords) => chords.groups)
      .enter().append('g');

    group.append('path')

({ width, height, innerRadiusRatio, innerRadiusOffset }) => {
                const radius = Math.min(width, height) / 2
                const innerRadius = radius * innerRadiusRatio
                const ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset)

                const arcGenerator = d3Arc()
                    .outerRadius(radius)
                    .innerRadius(innerRadius)
                const ribbonGenerator = d3Ribbon().radius(ribbonRadius)

                return { radius, innerRadius, arcGenerator, ribbonGenerator }
            }
        ),