Centering Forces

/**
 * Creates a new centering force with the specified center coordinates
 * @param x - X coordinate of the center position (optional, defaults to 0)
 * @param y - Y coordinate of the center position (optional, defaults to 0)
 * @returns CenterForce instance with configuration methods
 */
function forceCenter(x?: number, y?: number): CenterForce;

import { forceCenter } from "d3-force";

// Center at origin
const centerForce = forceCenter();

// Center at specific coordinates (e.g., viewport center)
const centerForce = forceCenter(400, 300);

// Add to simulation
simulation.force("center", forceCenter(width / 2, height / 2));

/**
 * Sets or gets the x-coordinate of the centering position
 * @param x - X coordinate (optional)
 * @returns Current x coordinate or force instance for chaining
 */
x(x?: number): number | CenterForce;

const centerForce = forceCenter();

// Set x coordinate
centerForce.x(200);

// Get current x coordinate
const currentX = centerForce.x(); // Returns 200

/**
 * Sets or gets the y-coordinate of the centering position
 * @param y - Y coordinate (optional)
 * @returns Current y coordinate or force instance for chaining
 */
y(y?: number): number | CenterForce;

const centerForce = forceCenter();

// Set y coordinate
centerForce.y(150);

// Get current y coordinate
const currentY = centerForce.y(); // Returns 150

/**
 * Sets or gets the centering force strength
 * @param strength - Strength value (optional, defaults to 1)
 * @returns Current strength or force instance for chaining
 */
strength(strength?: number): number | CenterForce;

const centerForce = forceCenter(400, 300);

// Full strength centering (default)
centerForce.strength(1);

// Soft centering for interactive graphs
centerForce.strength(0.05);

// Very weak centering
centerForce.strength(0.01);

function createCenteredSimulation(nodes, width, height) {
  return forceSimulation(nodes)
    .force("center", forceCenter(width / 2, height / 2));
}

// Update center when window resizes
window.addEventListener("resize", () => {
  const newWidth = window.innerWidth;
  const newHeight = window.innerHeight;
  simulation.force("center").x(newWidth / 2).y(newHeight / 2);
});

const simulation = forceSimulation(nodes)
  .force("center", forceCenter(400, 300).strength(0.1))
  .force("charge", forceManyBody())
  .force("link", forceLink(links));

// The soft centering won't fight against user dragging

const centerForce = forceCenter(0, 0);
simulation.force("center", centerForce);

// Animate center in a circle
const startTime = Date.now();
simulation.on("tick", () => {
  const elapsed = (Date.now() - startTime) / 1000;
  const angle = elapsed * 0.5; // Half radian per second
  const radius = 100;
  
  centerForce
    .x(Math.cos(angle) * radius)
    .y(Math.sin(angle) * radius);
});