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

const strength = 2 * Math.min(1, distance / 300);
      const desiredDistance = (Math.max(boxSource.width, boxSource.height) +
        Math.max(boxTarget.width, boxTarget.height)) / 2 + DEFAULT_MARGIN;
      links.push({
        source: layoutNodes[nodeIndex[edge.source.node.id]],
        target: layoutNodes[nodeIndex[edge.target.node.id]],
        distance: desiredDistance,
        strength,
      });
    }
  }

  const canvasHeight = (state.canvas as DataflowCanvas).getHeight();
  const force = forceSimulation(layoutNodes)
    .alphaDecay(ALPHA_DECAY)
    .force('x', forceX().x(node => node.ox)
      .strength(FORCE_X_STRENGTH))
    .force('y', forceY().y(node => node.oy)
      .strength(node =>
        // Prevent the nodes from moving vertically when they are too away
        // from the vertical center.
        Math.max(FORCE_Y_STRENGTH, Math.min(1, Math.abs(node.y - canvasHeight / 2) / canvasHeight)),
      ))
    .force('link', forceLink(links).distance(link => link.distance)) // .strength(link => link.strength)
    .force('charge', forceManyBody().strength(node => DEFAULT_CHARGE * (node.baseNode ? 3 : 1)))
    .force('collide', forceCollide().radius(node => node.size).iterations(COLLIDE_ITERATIONS));

  const alphaDiff = force.alpha() - force.alphaMin();
  force.on('tick', () => {
    const curAlphaDiff = force.alpha() - force.alphaMin();
    if (curAlphaDiff <= 0) {
      store.commit('modals/endProgress');

constructor(options: Options, public log: LogService) {
        this.canvasOptions = options;
        const ticker = this.ticker;

        // Creating the force simulation and defining the charges
        this.simulation = d3.forceSimulation()
            .force('charge',
                d3.forceManyBody().strength(this.charges.bind(this)))
            // .distanceMin(100).distanceMax(500))
            .force('gravity',
                d3.forceManyBody().strength(FORCES.GRAVITY))
            .force('friction',
                d3.forceManyBody().strength(FORCES.FRICTION))
            .force('center',
                d3.forceCenter(this.canvasOptions.width / 2, this.canvasOptions.height / 2))
            .force('x', d3.forceX())
            .force('y', d3.forceY())
            .on('tick', () => {
                ticker.emit(this.simulation); // ForceSvgComponent.ngOnInit listens
            });

    }

// -- d3

const dimensions = {
    svg: {
        w: 1100,
        h: 600
    }
};


const simulation = forceSimulation()
    .force('charge', forceManyBody()
        .strength(-20))
    .force('collide', forceCollide(15))
    .force('x', forceX(dimensions.svg.w / 2)
        .strength(0.4)
        .x(n => {
            const centerPoint = dimensions.svg.w / 4 * 3;  // 'center is 3/4 to the right'

            const downstreams = n.downstreams || [];
            const minXs = _.flatMap(downstreams, d => {
                return d.fx
                    ? [d.fx, d.x]
                    : [d.x];
            });

            const minX = _.min(minXs);
            return (minX || centerPoint) - 100;
        }))
    .force('y', forceY(dimensions.svg.h / 2))
    .force('link', forceLink()

[-d.textHeight / 2, -d.textWidth / 2],
              [d.textHeight / 2, d.textWidth / 2]
            ]
          }
          return [
            [-d.textWidth / 2, -d.textHeight / 2],
            [d.textWidth / 2, d.textHeight / 2]
          ]
        }).iterations(1)

        const xCenter = size[0] / 2
        const yCenter = size[1] / 2

        const simulation = forceSimulation(projectedNodes)
          .velocityDecay(0.6)
          .force("x", forceX(xCenter).strength(1.2))
          .force("y", forceY(yCenter).strength(1.2))
          .force("collide", collide)

        simulation.stop()

        for (let i = 0; i < iterations; ++i) simulation.tick()
        //      }

        const xMin = min(
          projectedNodes.map(
            p => p.x - (p.rotate ? p.textHeight / 2 : p.textWidth / 2)
          )
        )
        const xMax = max(
          projectedNodes.map(
            p => p.x + (p.rotate ? p.textHeight / 2 : p.textWidth / 2)

const linksSet = new Set(links);
      for (const host of removeHosts) {
        for (const link of host.links) {
          linksSet.delete(link);
        }
      }

      links = [...linksSet];
      hosts = hosts.slice(0, MAX_HOSTS);
    }

    const linkForce = forceLink(links)
      .id(l => l.id)
      .strength(0.2);

    const gravityXForce = forceX().strength(0.03);
    const gravityYForce = forceY().strength(0.03);

    this.simulation = forceSimulation(hosts)
      .force('link', linkForce)
      .force('charge', forceManyBody().strength(-20))
      .force('center', forceCenter(width / 2, height / 2))
      .force('gravityX', gravityXForce)
      .force('gravityY', gravityYForce)
      .alphaMin(0.1)
      .alphaDecay(0.02276278) // alphaMin and alphaDecay result in ~100 ticks
      .on('tick', () => {
        this.setState({hosts, links});
      });
  }

.strength(
                networkSettings.forceManyBody ||
                  (d => -25 * nodeSizeAccessor(d))
              )
          )

        //        simulation.force("link", linkForce).nodes(projectedNodes)

        simulation.nodes(projectedNodes)

        const forceMod = adjustedSize[1] / adjustedSize[0]

        if (!simulation.force("x")) {
          simulation.force(
            "x",
            forceX(adjustedSize[0] / 2).strength(forceMod * 0.1)
          )
        }
        if (!simulation.force("y")) {
          simulation.force("y", forceY(adjustedSize[1] / 2).strength(0.1))
        }

        if (projectedEdges.length !== 0 && !simulation.force("link")) {
          simulation.force("link", linkForce)
          simulation.force("link").links(projectedEdges)
        }

        //reset alpha if it's too cold
        if (simulation.alpha() < 0.1) {
          simulation.alpha(1)
        }

// not overlapping, so we can stop counting their "charge". This should help performance by
      // reducing computation needs.
      .distanceMax(60);

    // This force acts as a spring force between digest nodes. More similar digests pull more
    // tightly and should be closer together.
    // See https://github.com/d3/d3-force#links
    const linkForce = d3Force.forceLink(this.links)
      .distance((d) => d.value / this.linkTightness);

    // This force keeps the diagram centered in the SVG.
    // See https://github.com/d3/d3-force#centering
    const centerForce = d3Force.forceCenter(this.width / 2, this.height / 2);

    // These forces help keep the nodes in the visible area.
    const xForce = d3Force.forceX(this.width / 2);
    xForce.strength(0.1);
    const yForce = d3Force.forceY(this.height / 2);
    yForce.strength(0.2); // slightly stronger force down since we have more width to draw into

    // This starts a simulation that will render over the next few seconds as the nodes are
    // simulated into place.
    // See https://github.com/d3/d3-force#forceSimulation
    d3Force.forceSimulation(this.nodes)
      .force('charge', chargeForce) // The names are arbitrary (and inspired by D3 documentation).
      .force('link', linkForce)
      .force('center', centerForce)
      .force('fitX', xForce)
      .force('fixY', yForce)
      .alphaDecay(0.03395) // 1 - pow(0.001, 1 / 200); i.e. 200 iterations
      .on('tick', () => {
        // On each tick, the simulation will update the x,y values of the nodes. We can then

export default function computeForceBasedCirclePack(rawData, xScale, size) {
  const data = rawData.map(d => ({ ...d, orgX: d.x }));
  const simulation = d3Force
    .forceSimulation(data)
    .force('x', d3Force.forceX(d => xScale(d.orgX)).strength(1))
    .force('y', d3Force.forceY(0))
    .force('collide', d3Force.forceCollide(d => size(d)))
    .stop();

  for (let i = 0; i < 500; i += 1) {
    simulation.tick();
    data.forEach(d => {
      d.x = Math.min(d.x, xScale.range()[1]);
      d.x = Math.max(d.x, xScale.range()[0]);
    });
  }

  const result = data.map(d => ({
    ...d,
    offset: Math.abs(d.x - xScale(d.orgX)) / (xScale.range()[1] - xScale.range()[0]),
    x: xScale.invert(d.x),

})
      )
    )
    .range([MIN_RADIUS, MAX_RADIUS])

  data = data.map(d => {
    d.radius = sizeBy === "None" ? 10 : scale(+d[sizeBy])
    return d
  })

  //Jitter the points so they dont collide with one another when xy values are similar
  //Copied From: https://bl.ocks.org/mbostock/6526445e2b44303eebf21da3b6627320
  const simulation = forceSimulation(data)
    .force(
      "x",
      forceX(d => {
        return +d.Timeline
      }).strength(1)
    )
    .force(
      "y",
      forceY(d => {
        return +d.Cost
      }).strength(1)
    )
    .force(
      "collide",
      forceCollide(d => {
        return d.radius / 100
      })
    )
    .stop()