tessl/npm-d3-force

Force-directed graph layout using velocity Verlet integration for simulating physical forces on particles

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Centering Forces

Name: tessl/npm-d3-force
Author: tessl

The centering force translates nodes uniformly so that the mean position of all nodes (center of mass) is at a given position. This force modifies node positions directly rather than velocities, preventing oscillation while maintaining relative positioning between nodes.

Capabilities

Centering Force Factory

Creates a new centering force with specified center coordinates.

/**
 * 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;

Usage Examples:

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

X Coordinate Configuration

Configure the x-coordinate of the centering position.

/**
 * 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;

Usage Example:

const centerForce = forceCenter();

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

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

Y Coordinate Configuration

Configure the y-coordinate of the centering position.

/**
 * 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;

Usage Example:

const centerForce = forceCenter();

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

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

Strength Configuration

Configure the strength of the centering force for softer centering behavior.

/**
 * 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;

Usage Examples:

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

Common Usage Patterns

Viewport Centering

Keep nodes centered in the viewport regardless of window size:

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

Soft Centering for Interactive Graphs

Use reduced strength for smoother interactions when nodes are dragged:

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

Dynamic Center Positioning

Animate the center position over time:

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

Key Characteristics

Direct Position Modification: Unlike other forces, centering modifies node positions directly rather than adding to velocities
No Oscillation: This approach prevents nodes from overshooting and oscillating around the center
Preserves Layout: Maintains the relative positions of nodes while translating the entire layout
Efficient: O(n) operation that processes each node once per application
Configurable Strength: Strength parameter allows for soft centering behavior suitable for interactive applications