ForceDirected

import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";

const forceDirected = root.container.children.push(
  am5hierarchy.ForceDirected.new(root, {
    centerStrength: 0.5,
    manyBodyStrength: -15
  })
);

forceDirected.set("nodePadding", 10);

forceDirected.set("centerStrength", 1.2);

forceDirected.set("manyBodyStrength", -20);

forceDirected.set("linkWithStrength", 0.8);

forceDirected.set("velocityDecay", 0.7);

forceDirected.set("initialFrames", 300);

forceDirected.set("showOnFrame", 50);

forceDirected.set("minRadius", am5.percent(2));
forceDirected.set("minRadius", 15); // 15 pixels

forceDirected.set("maxRadius", am5.percent(10));
forceDirected.set("maxRadius", 50); // 50 pixels

forceDirected.set("xField", "x");

forceDirected.set("yField", "y");

interface IForceDirectedDataObject {
  name?: string;
  value?: number;
  children?: IForceDirectedDataObject[];
}

forceDirected.data.setAll([{
  name: "Central Node",
  value: 0,
  children: [
    {
      name: "Branch 1",
      value: 10,
      children: [
        { name: "Leaf 1.1", value: 5 },
        { name: "Leaf 1.2", value: 3 }
      ]
    },
    {
      name: "Branch 2",
      value: 15,
      children: [
        { name: "Leaf 2.1", value: 8 },
        { name: "Leaf 2.2", value: 7 }
      ]
    }
  ]
}]);

forceDirected.data.setAll([{
  name: "Center",
  value: 10,
  x: 400,  // Fixed X position
  y: 300,  // Fixed Y position
  children: [
    { name: "Node 1", value: 5 },
    { name: "Node 2", value: 8 }
  ]
}]);

forceDirected.nodes.template.setAll({
  toggleKey: "disabled",
  draggable: true
});

forceDirected.circles.template.setAll({
  strokeWidth: 2,
  fillOpacity: 0.8
});

forceDirected.outerCircles.template.setAll({
  strokeWidth: 2,
  strokeOpacity: 0.3
});

forceDirected.labels.template.setAll({
  text: "{category}",
  fontSize: 11,
  centerX: am5.p50,
  centerY: am5.p50
});

forceDirected.links.template.setAll({
  strokeWidth: 1,
  strokeOpacity: 0.5,
  distance: 1.5
});

restartSimulation(alpha: number): void

forceDirected.restartSimulation(0.5);

updateNodePositions(): void

updateLinkWith(dataItems: Array<DataItem<IForceDirectedDataItem>>): void

selectDataItem(dataItem: DataItem<IForceDirectedDataItem>): void

getDataItemById(id: string): DataItem<IForceDirectedDataItem> | undefined

linkDataItems(
  source: DataItem<IForceDirectedDataItem>,
  target: DataItem<IForceDirectedDataItem>,
  strength?: number
): HierarchyLink

unlinkDataItems(
  source: DataItem<IForceDirectedDataItem>,
  target: DataItem<IForceDirectedDataItem>
): void

areLinked(
  source: DataItem<IForceDirectedDataItem>,
  target: DataItem<IForceDirectedDataItem>
): boolean

enableDataItem(
  dataItem: DataItem<IForceDirectedDataItem>,
  maxDepth?: number,
  depth?: number,
  duration?: number
): void

disableDataItem(
  dataItem: DataItem<IForceDirectedDataItem>,
  duration?: number
): void

addChildData(
  dataItem: DataItem<IForceDirectedDataItem>,
  data: Array<any>
): void

hoverDataItem(dataItem: DataItem<IForceDirectedDataItem>): void

unhoverDataItem(dataItem: DataItem<IForceDirectedDataItem>): void

forceDirected.events.on("dataitemselected", (ev) => {
  console.log("Selected:", ev.dataItem);
});