How to use d3-chord - 10 common examples

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 => {

[1013, 990, 940, 6907]
]; // From Circos Table Viewer example http://mkweb.bcgsc.ca/circos/guide/tables/

let comparatorFn: ((a: number, b: number) => number) | null;

let subgroupAccessor: (this: SVGPathElement, d: d3Chord.Chord, ...args: any[]) => d3Chord.ChordSubgroup;
let numAccessor: (this: SVGPathElement, d: d3Chord.ChordSubgroup, ...args: any[]) => number;

// ---------------------------------------------------------------------
// Test Chord
// ---------------------------------------------------------------------

// chord() create ChordLayout  generator ===============================

let chordLayout: d3Chord.ChordLayout;
chordLayout = d3Chord.chord();

// Configure ChordLayout generator =====================================

// padAngle() ----------------------------------------------------------

chordLayout = chordLayout.padAngle(0.05);
num = chordLayout.padAngle();

// sortGroups() --------------------------------------------------------

chordLayout = chordLayout.sortGroups(ascending);
chordLayout = chordLayout.sortGroups(null);
comparatorFn = chordLayout.sortGroups();

// sortSubgroups() -----------------------------------------------------

export default function Chord({
  matrix,
  padAngle,
  sortGroups,
  sortSubgroups,
  sortChords,
  children,
}) {
  const chord = d3chord();
  if (padAngle) chord.padAngle(padAngle);
  if (sortGroups) chord.sortGroups(sortGroups);
  if (sortSubgroups) chord.sortSubgroups(sortSubgroups);
  if (sortChords) chord.sortChords(sortChords);
  const chords = chord(matrix);
  if (children) return children({ chords });

  // so react-docgen picks it up
  return

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 }
            }
        ),

const { groupWidth = 20, padAngle = 0.01, sortGroups } = networkSettings
        const arcGenerator = arc()
          .innerRadius(radius - groupWidth)
          .outerRadius(radius)

        const ribbonGenerator = ribbon().radius(radius - groupWidth)

        const matrixifiedNetwork = matrixify({
          edgeHash: edgeHash,
          nodes: projectedNodes,
          edgeWidthAccessor,
          nodeIDAccessor
        })

        const chordLayout = chord().padAngle(padAngle)

        if (sortGroups) {
          chordLayout.sortGroups(sortGroups)
        }

        const chords = chordLayout(matrixifiedNetwork)
        const groups = chords.groups

        groups.forEach(group => {
          const groupCentroid = arcGenerator.centroid(group)
          const groupD = arcGenerator(group)
          const groupNode = projectedNodes[group.index]
          groupNode.d = groupD
          groupNode.index = group.index
          groupNode.x = groupCentroid[0] + adjustedSize[0] / 2
          groupNode.y = groupCentroid[1] + adjustedSize[1] / 2