How to use the d3-force.forceCollide function in d3-force

forceCenter(0.1); // alpha

// Collision ===========================================================================

// create Collision force --------------------------------------------------------------

let forceCollide: d3Force.ForceCollide;

// without radius
forceCollide = d3Force.forceCollide();

// with fixed radius
forceCollide = d3Force.forceCollide(15);

// with radius accessor function
forceCollide = d3Force.forceCollide((node, index, nodes) => {
    const n: SimNode = node;
    const i: number = index;
    const ns: SimNode[] = nodes;
    return n.r;
});

// Configure Collision force -----------------------------------------------------------

let radiusAccessor: (node: SimNode, i: number, nodes: SimNode[]) => number;

// radius

forceCollide = forceCollide.radius(20);
forceCollide = forceCollide.radius((node, index, nodes) => {
    const n: SimNode = node;
    const i: number = index;

y1: 0,
				x2: x,
				y2: sign * innerTickSize,
				labelX: x,
				labelY: sign * tickSpacing,
			};
		});

		if (showTicks && flexTicks) {
			// console.log(ticks, showTicks);

			const nodes = ticks.map(d => ({ id: d.value, value: d.value, fy: d.y2, origX: d.x1 }));

			const simulation = forceSimulation(nodes)
				.force("x", forceX(d => d.origX).strength(1))
				.force("collide", forceCollide(22))
				// .force("center", forceCenter())
				.stop();

			for (let i = 0; i < 100; ++i) simulation.tick();
			// console.log(nodes);

			const zip = zipper()
				.combine((a, b) => {
					if (Math.abs(b.x - b.origX) > 0.01) {
						return {
							...a,
							x2: b.x,
							labelX: b.x
						};
					}
					return a;

let circle_tip = select('#col4').select('#circletip');

      //TODO make new legend
      // select('.legend').selectAll('.rectLegend').remove()
      //
      // let legend = svglegend.legendColor()
      // legend.scale(self.legendScale);
      // legend.shapeWidth((that.svgWidth)/8);
      // d3.select('.legend').call(legend);
      self.dotDataColloection.forEach(dot =>{
        [dot.x,dot.y] = self.projection([dot.longitude,dot.latitude])
      })

      let simulation = forceSimulation(self.dotDataColloection)
                          .force('collide',forceCollide().radius(5).iterations(10))
                          .stop();

      timeout(function(){
      for (var i = 0,
        n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
         i < n; ++i) {
          simulation.tick();}

      let circles = draw.selectAll('circle').data(self.dotDataColloection);
          circles.exit().remove();
          circles = circles.enter()
                      .append('circle')
                      .merge(circles);
          circles.attr('cx',(d:any)=>d.x)
                     .attr('cy',(d:any)=>d.y)
                     .attr('r',4)

function attachForce(sankeyNode, forceKey, d, gd) {
    // Attach force to nodes in the same column (same x coordinate)
    switchToForceFormat(d.graph.nodes);
    var nodes = d.graph.nodes
        .filter(function(n) {return n.originalX === d.node.originalX;})
        // Filter out children
        .filter(function(n) {return !n.partOfGroup;});
    d.forceLayouts[forceKey] = d3Force.forceSimulation(nodes)
        .alphaDecay(0)
        .force('collide', d3Force.forceCollide()
            .radius(function(n) {return n.dy / 2 + d.nodePad / 2;})
            .strength(1)
            .iterations(c.forceIterations))
        .force('constrain', snappingForce(sankeyNode, forceKey, nodes, d, gd))
        .stop();
}

}
    if (alphaDecay) {
      this.simulation.alphaDecay(alphaDecay);
    }
    const _forceLink = forceLink();
    if (nodeIdKey) {
      _forceLink.id(d => d[nodeIdKey]);
    }
    if (linkDistance) {
      _forceLink.distance(linkDistance);
    }
    this.simulation.force('link', _forceLink);
    // this.simulation.force('center', forceCenter());

    if (collideRadius || collideStrength) {
      const _forceCollide = forceCollide();
      if (collideRadius) {
        _forceCollide.radius(typeof collideRadius === 'function' ? (d) => {
          return collideRadius(d);
        } : collideRadius);
      }
      if (collideStrength) {
        _forceCollide.strength(collideStrength);
      }
      this.simulation.force('collide', _forceCollide);
    } else {
      this.simulation.force('collide', null);
    }

    if (chargeStrength) {
      this.simulation.force("charge", forceManyBody().strength(chargeStrength));
    }

export const computeForces = ({ axis, valueScale, ordinalScale, spacing, forceStrength }) => {
    const collisionForce = forceCollide(d => d.size / 2 + spacing / 2)

    let xForce
    let yForce
    if (axis === 'x') {
        xForce = forceX(d => {
            //console.log(d)
            return valueScale(d.value)
        }).strength(forceStrength)
        yForce = forceY(d => ordinalScale(d.group))
    } else if (axis === 'y') {
        xForce = forceX(d => ordinalScale(d.group))
        yForce = forceY(d => valueScale(d.value)).strength(forceStrength)
    }

    return { x: xForce, y: yForce, collision: collisionForce }
}

ForceDirectedSeries.prototype.updateNodeList = function () {
        var d3forceSimulation = this.d3forceSimulation;
        d3forceSimulation.nodes(this.nodes.values);
        this._linkForce = d3force.forceLink(this.forceLinks);
        d3forceSimulation.force("link", this._linkForce);
        this._collisionForce = d3force.forceCollide();
        d3forceSimulation.force("collision", this._collisionForce);
        var w = $math.max(50, this.innerWidth);
        var h = $math.max(50, this.innerHeight);
        d3forceSimulation.force("x", d3force.forceX().x(w / 2).strength(this.centerStrength * 100 / w));
        d3forceSimulation.force("y", d3force.forceY().y(h / 2).strength(this.centerStrength * 100 / h));
    };
    /**

function internalLayout(dgraph) {
  var simulation = force.forceSimulation(dgraph.nodes)
      .force('charge', force.forceManyBody().strength(manyBodyStrength))
      .force('link', force.forceLink(dgraph.edges).distance(linkDistance))
      .force('collide', force.forceCollide(collideCircle).strength(1).iterations(3));

  simulation.alphaDecay(0);

  simulation.stop();
  var iteration = 0;
  var nodesCount = dgraph.nodes.length;
  var iterationsCount = Math.min(nodesCount, Math.log(nodesCount) * 30);
  if (iterationsCount < 2) iterationsCount = 2;

  while (iteration++ < iterationsCount) {
    simulation.tick();
  }

  var size = enclose(dgraph.nodes);
  dgraph.nodes.forEach(function (node) {
    node.x -= size.x;

width = parseInt(svgSelection.style('width'));
    height = parseInt(svgSelection.style('height'));

    simulationGroups = force.forceSimulation()
        .force('gravity', force.forceCenter(width/2, height/2))
        .force('attract', force.forceManyBody().strength(1010).distanceMin(10))
        .force('repel', force.forceManyBody().strength(-1000).distanceMax(
            Math.min(width, height) - margin * 2 + 90)
            )
        .force('collide', force.forceCollide(75))
        .stop();

    simulationNodes = force.forceSimulation()
        .force('x', force.forceX(d => (d.group && d.group.x) ? d.group.x : width/2).strength(0.05))
        .force('y', force.forceY(d => (d.group && d.group.y) ? d.group.y : height/2).strength(0.05))
        .force('collide', force.forceCollide(markMargin).strength(1))
        .on('tick', tick);
}