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

});
  });

  model.edges.forEach(function(edge) {
    links.push({
      source: edge.from,
      target: edge.to
    });
  });

  // https://www.npmjs.com/package/d3-force
  var simulation = d3.forceSimulation(nodes)
    .force('charge', d3.forceManyBody())
    .force('link', d3.forceLink(links).distance(20).strength(1)) 
    .force('x', d3.forceX())
    .force('y', d3.forceY());

  simulation.tick(model.steps);
  simulation.stop();

  simulation.nodes().forEach(function(node, n) {
    model.nodes[n].x = node.x;
    model.nodes[n].y = node.y;
  });

  //fitToViewport(model.nodes, false);

  return model;
};

.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
        // select and update those nodes.
        d3Select.select(clusterSk)

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

force.initialize = function(nodes) {
    fociXForce = forceX(r => {
      return layoutFociMap[r.layoutFocus].x;
    });
    fociYForce = forceY(r => layoutFociMap[r.layoutFocus].y);
    colorXForce = forceX(r => {
      return r.colorFocus ? colorFociMap[r.colorFocus].x : 0;
    });
    colorYForce = forceY(r => {
      return r.colorFocus ? colorFociMap[r.colorFocus].y : 0;
    });

    fociXForce.initialize(nodes);
    fociYForce.initialize(nodes);
    colorXForce.initialize(nodes);
    colorYForce.initialize(nodes);
  }

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()

  for (let i = 0; i < 120; ++i) simulation.tick()

  return data
}

edgeStyle: { stroke: theme[2], fill: "none" },
  nodeIDAccessor: d => d.hierarchicalID || d.name
}

const combinedFociNodes = [...Array(100)].map((d, i) => ({
  name: `Node ${i}`,
  r: Math.random() * 10 + (i % 4) * 2,
  fociX: (i % 2) * 200 + 50,
  fociY: Math.floor((i % 4) / 2) * 200,
  combinedY: (i % 4) * 75 + 150,
  color: theme[i % 4]
}))

const combinedFociSimulation = forceSimulation()
  .force("collide", forceCollide().radius(d => d.r))
  .force("y", forceY(d => d.combinedY))

const bubbleProps = {
  nodes: combinedFociNodes,
  nodeIDAccessor: "name",
  networkType: {
    type: "force",
    iterations: 200,
    simulation: combinedFociSimulation,
    zoom: false
  },
  nodeStyle: d => ({ fill: d.color })
}

const pre = `
import { forceSimulation, forceY, forceCollide } from "d3-force";

function _createForceSimulation(width, height) {
    const frx = d3ForceX(width / 2).strength(CONST.FORCE_X);
    const fry = d3ForceY(height / 2).strength(CONST.FORCE_Y);

    return d3ForceSimulation()
        .force('charge', d3ForceManyBody().strength(CONST.FORCE_IDEAL_STRENGTH))
        .force('x', frx)
        .force('y', fry);
}

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