@antv/layout 1.2.14-beta.9 → 2.0.0-alpha.2

package/src/algorithm/force/typing.d.ts

@@ -0,0 +1,76 @@
+declare module 'd3-octree' {
+  export interface OctreeLeaf<T> {
+    data: T;
+    next?: OctreeLeaf<T>;
+    length?: undefined;
+  }
+
+  export interface OctreeInternalNode<T>
+    extends Array<OctreeInternalNode<T> | OctreeLeaf<T> | undefined> {
+    length: 8;
+  }
+
+  export type OctreeNode<T> = OctreeInternalNode<T> | OctreeLeaf<T>;
+
+  export interface Octree<T> {
+    x(): (d: T) => number;
+    x(x: (d: T) => number): this;
+
+    y(): (d: T) => number;
+    y(y: (d: T) => number): this;
+
+    z(): (d: T) => number;
+    z(z: (d: T) => number): this;
+
+    extent(): [[number, number, number], [number, number, number]] | undefined;
+    extent(extent: [[number, number, number], [number, number, number]]): this;
+
+    cover(x: number, y: number, z: number): this;
+
+    add(datum: T): this;
+    addAll(data: T[]): this;
+
+    remove(datum: T): this;
+    removeAll(data: T[]): this;
+
+    copy(): Octree<T>;
+    root(): OctreeNode<T> | undefined;
+
+    data(): T[];
+    size(): number;
+
+    find(x: number, y: number, z: number, radius?: number): T | undefined;
+    findAllWithinRadius(x: number, y: number, z: number, radius: number): T[];
+
+    visit(
+      callback: (
+        node: OctreeNode<T>,
+        x0: number,
+        y0: number,
+        z0: number,
+        x1: number,
+        y1: number,
+        z1: number,
+      ) => void | boolean,
+    ): this;
+
+    visitAfter(
+      callback: (
+        node: OctreeNode<T>,
+        x0: number,
+        y0: number,
+        z0: number,
+        x1: number,
+        y1: number,
+        z1: number,
+      ) => void,
+    ): this;
+  }
+
+  export function octree<T = [number, number, number]>(
+    data?: T[],
+    x?: (d: T) => number,
+    y?: (d: T) => number,
+    z?: (d: T) => number,
+  ): Octree<T>;
+}

package/src/algorithm/force-atlas2/body.ts

@@ -0,0 +1,115 @@
+import Quad from './quad';
+
+/**
+ * @fileOverview body
+ * @author shiwu.wyy@antfin.com
+ */
+
+type BodyProps = {
+  id?: Number;
+  rx: number;
+  ry: number;
+  fx?: number;
+  fy?: number;
+  mass: number;
+  degree: number;
+  g?: number;
+};
+
+// represents a body(a point mass) and its position
+export default class Body {
+  public id: Number;
+  public rx: number;
+  public ry: number;
+  public fx: number;
+  public fy: number;
+  public mass: number;
+  public degree: number;
+  public g: number;
+
+  constructor(params: BodyProps) {
+    /**
+     * the id of this body, the same with the node id
+     * @type  {number}
+     */
+    this.id = params.id || 0;
+    /**
+     * the position of this body
+     * @type  {number}
+     */
+    this.rx = params.rx;
+    /**
+     * the position of this body
+     * @type  {number}
+     */
+    this.ry = params.ry;
+    /**
+     * the force acting on this body
+     * @type  {number}
+     */
+    this.fx = 0;
+    /**
+     * the force acting on this body
+     * @type  {number}
+     */
+    this.fy = 0;
+    /**
+     * the mass of this body, =1 for a node
+     * @type  {number}
+     */
+    this.mass = params.mass;
+    /**
+     * the degree of the node represented by this body
+     * @type  {number}
+     */
+    this.degree = params.degree;
+    /**
+     * the parameter for repulsive force, = kr
+     * @type  {number}
+     */
+    this.g = params.g || 0;
+  }
+  // returns the euclidean distance
+  distanceTo(bo: Body) {
+    const dx = this.rx - bo.rx;
+    const dy = this.ry - bo.ry;
+    return Math.hypot(dx, dy);
+  }
+  setPos(x: number, y: number) {
+    this.rx = x;
+    this.ry = y;
+  }
+  // resets the forces
+  resetForce() {
+    this.fx = 0;
+    this.fy = 0;
+  }
+  addForce(b: Body) {
+    const dx = b.rx - this.rx;
+    const dy = b.ry - this.ry;
+    let dist = Math.hypot(dx, dy);
+    dist = dist < 0.0001 ? 0.0001 : dist;
+    // the repulsive defined by force atlas 2
+    const F = (this.g * (this.degree + 1) * (b.degree + 1)) / dist;
+    this.fx += (F * dx) / dist;
+    this.fy += (F * dy) / dist;
+  }
+  // if quad contains this body
+  in(quad: Quad) {
+    return quad.contains(this.rx, this.ry);
+  }
+  // returns a new body
+  add(bo: Body) {
+    const nenwMass = this.mass + bo.mass;
+    const x = (this.rx * this.mass + bo.rx * bo.mass) / nenwMass;
+    const y = (this.ry * this.mass + bo.ry * bo.mass) / nenwMass;
+    const dg = this.degree + bo.degree;
+    const params: BodyProps = {
+      rx: x,
+      ry: y,
+      mass: nenwMass,
+      degree: dg,
+    };
+    return new Body(params);
+  }
+}

package/src/algorithm/force-atlas2/index.ts

@@ -0,0 +1,189 @@
+import { BaseLayoutWithIterations } from '../base-layout';
+import type { ID, NullablePosition } from '../../types';
+import { normalizeViewport } from '../../util';
+import { initNodePosition } from '../../model/data';
+import { applySingleNodeLayout } from '../../util/common';
+import { formatNodeSizeFn, formatNumberFn, formatSizeFn } from '../../util/format';
+import { Simulation } from './simulation';
+import type {
+  ForceAtlas2LayoutOptions,
+  ParsedForceAtlas2LayoutOptions,
+} from './types';
+
+export type { ForceAtlas2LayoutOptions };
+
+const DEFAULTS_LAYOUT_OPTIONS: Partial<ForceAtlas2LayoutOptions> = {
+  nodeSize: 10,
+  nodeSpacing: 0,
+  width: 300,
+  height: 300,
+  kr: 5,
+  kg: 1,
+  mode: 'normal',
+  preventOverlap: false,
+  dissuadeHubs: false,
+  maxIteration: 0,
+  ks: 0.1,
+  ksmax: 10,
+  tao: 0.1,
+};
+
+type SizeMap = Record<string, number>;
+
+export class ForceAtlas2Layout extends BaseLayoutWithIterations<ForceAtlas2LayoutOptions> {
+  public id = 'force-atlas2';
+
+  public simulation: Simulation | null = null;
+
+  protected getDefaultOptions(): Partial<ForceAtlas2LayoutOptions> {
+    return DEFAULTS_LAYOUT_OPTIONS;
+  }
+
+  protected async layout(options: ForceAtlas2LayoutOptions): Promise<void> {
+    const merged = this.parseOptions(options);
+    const { width, height, prune, center } = merged;
+
+    const n = this.model.nodeCount();
+    if (!n || n === 1) {
+      return applySingleNodeLayout(this.model, center);
+    }
+
+    initNodePosition(this.model, width, height);
+
+    const sizes = this.getSizes(merged.nodeSize, merged.nodeSpacing);
+
+    const simulation = this.setSimulation();
+    simulation.data(this.model, sizes);
+    simulation.initialize(merged);
+    simulation.restart();
+
+    const run = () =>
+      new Promise<void>((resolve) => {
+        simulation.on('end', resolve);
+      });
+
+    if (!prune) return run();
+
+    await run();
+
+    // prune: 把叶子节点贴到父节点并再运行若干次以收敛
+    if (prune) {
+      const edges = this.model.edges();
+      for (let j = 0; j < edges.length; j += 1) {
+        const { source, target } = edges[j];
+        const sourceDegree = this.model.degree(source);
+        const targetDegree = this.model.degree(target);
+        const sourceNode = this.model.node(source)!;
+        const targetNode = this.model.node(target)!;
+        if (sourceDegree <= 1) {
+          sourceNode.x = targetNode.x;
+          sourceNode.y = targetNode.y;
+        } else if (targetDegree <= 1) {
+          targetNode.x = sourceNode.x;
+          targetNode.y = sourceNode.y;
+        }
+      }
+      simulation.initialize({
+        ...merged,
+        prune: false,
+        barnesHut: false,
+      });
+      simulation.tick(100);
+    }
+  }
+
+  private getSizes(
+    nodeSize?: ForceAtlas2LayoutOptions['nodeSize'],
+    nodeSpacing?: ForceAtlas2LayoutOptions['nodeSpacing'],
+  ): SizeMap {
+    const result: SizeMap = {};
+    this.model.forEachNode((node) => {
+      const nodeSizeFn = formatNodeSizeFn(nodeSize, nodeSpacing);
+      result[node.id] = nodeSizeFn(node._original);
+    });
+    return result;
+  }
+
+  private setSimulation() {
+    const simulation = this.simulation || new Simulation();
+
+    if (!this.simulation) {
+      this.simulation = simulation.on('tick', () =>
+        this.options.onTick?.(this),
+      );
+    }
+
+    return this.simulation;
+  }
+
+  private parseOptions(
+    options: ForceAtlas2LayoutOptions = {},
+  ): ParsedForceAtlas2LayoutOptions {
+    const { barnesHut, prune, maxIteration, kr, kg, nodeSize, nodeSpacing } =
+      options;
+    const auto: Partial<ForceAtlas2LayoutOptions> = {};
+
+    const n = this.model.nodeCount();
+
+    if (barnesHut === undefined && n > 250) auto.barnesHut = true;
+    if (prune === undefined && n > 100) auto.prune = true;
+
+    if (maxIteration === 0 && !prune) {
+      auto.maxIteration = 250;
+      if (n <= 200 && n > 100) auto.maxIteration = 1000;
+      else if (n > 200) auto.maxIteration = 1200;
+    } else if (maxIteration === 0 && prune) {
+      auto.maxIteration = 100;
+      if (n <= 200 && n > 100) auto.maxIteration = 500;
+      else if (n > 200) auto.maxIteration = 950;
+    }
+
+    if (!kr) {
+      auto.kr = 50;
+      if (n > 100 && n <= 500) auto.kr = 20;
+      else if (n > 500) auto.kr = 1;
+    }
+    if (!kg) {
+      auto.kg = 20;
+      if (n > 100 && n <= 500) auto.kg = 10;
+      else if (n > 500) auto.kg = 1;
+    }
+
+    return {
+      ...options,
+      ...auto,
+      ...normalizeViewport(options),
+      nodeSize: formatSizeFn(
+        nodeSize,
+        DEFAULTS_LAYOUT_OPTIONS.nodeSize as number,
+      ),
+      nodeSpacing: formatNumberFn(
+        nodeSpacing,
+        DEFAULTS_LAYOUT_OPTIONS.nodeSpacing as number,
+      ),
+    } as ParsedForceAtlas2LayoutOptions;
+  }
+
+  public stop(): void {
+    this.simulation?.stop();
+  }
+
+  public tick(iterations: number = 1): void {
+    this.simulation?.tick(iterations);
+  }
+
+  public restart(): void {
+    this.simulation?.restart();
+  }
+
+  public setFixedPosition(id: ID, position: NullablePosition | null): void {
+    this.simulation?.setFixedPosition(id, position);
+  }
+
+  public destroy(): void {
+    super.destroy();
+    this.stop();
+    this.simulation?.destroy();
+    this.simulation = null;
+  }
+}

package/src/algorithm/force-atlas2/quad-tree.ts

@@ -0,0 +1,109 @@
+import Body from './body';
+import Quad from './quad';
+
+/**
+ * @fileOverview quadTree
+ * @author shiwu.wyy@antfin.com
+ */
+
+export default class QuadTree {
+  public body: Body | null;
+  public quad: Quad | null;
+  public theta: number;
+  public NW: QuadTree | null;
+  public NE: QuadTree | null;
+  public SW: QuadTree | null;
+  public SE: QuadTree | null;
+
+  // each quadtree represents a quadrant and an aggregate body
+  // that represents all bodies inside the quadrant
+  constructor(param: Quad | null) {
+    /**
+     * (aggregated) body in this quad
+     * @type  {object}
+     */
+    this.body = null;
+    /**
+     * tree representing the northwest quadrant
+     * @type  {object}
+     */
+    this.quad = null;
+    this.NW = null;
+    this.NE = null;
+    this.SW = null;
+    this.SE = null;
+    /**
+     * threshold
+     * @type  {number}
+     */
+    this.theta = 0.5;
+    if (param != null) this.quad = param;
+  }
+  // insert a body(node) into the tree
+  insert(bo: Body) {
+    // if this node does not contain a body, put the new body bo here
+    if (this.body == null) {
+      this.body = bo;
+      return;
+    }
+    // internal node
+    if (!this._isExternal()) {
+      // update mass info
+      this.body = this.body.add(bo);
+      // insert body into quadrant
+      this._putBody(bo);
+    } else {
+      // external node
+      // divide this region into four children
+      if (this.quad) {
+        this.NW = new QuadTree(this.quad.NW());
+        this.NE = new QuadTree(this.quad.NE());
+        this.SW = new QuadTree(this.quad.SW());
+        this.SE = new QuadTree(this.quad.SE());
+      }
+
+      // insert this body and bo
+      this._putBody(this.body);
+      this._putBody(bo);
+      // update the mass info
+      this.body = this.body.add(bo);
+    }
+  }
+  // inserts bo into a quad
+  // tslint:disable-next-line
+  _putBody(bo: Body) {
+    if (!this.quad) return;
+    if (bo.in(this.quad.NW()) && this.NW) this.NW.insert(bo);
+    else if (bo.in(this.quad.NE()) && this.NE) this.NE.insert(bo);
+    else if (bo.in(this.quad.SW()) && this.SW) this.SW.insert(bo);
+    else if (bo.in(this.quad.SE()) && this.SE) this.SE.insert(bo);
+  }
+  // tslint:disable-next-line
+  _isExternal() {
+    // four children are null
+    return (
+      this.NW == null && this.NE == null && this.SW == null && this.SE == null
+    );
+  }
+  // update the forces
+  updateForce(bo: Body) {
+    if (this.body == null || bo === this.body) {
+      return;
+    }
+    // if the current node is external
+    if (this._isExternal()) bo.addForce(this.body);
+    // internal nodes
+    else {
+      const s = this.quad ? this.quad.getLength() : 0;
+      const d = this.body.distanceTo(bo);
+      // b is far enough
+      if (s / d < this.theta) bo.addForce(this.body);
+      else {
+        this.NW && this.NW.updateForce(bo);
+        this.NE && this.NE.updateForce(bo);
+        this.SW && this.SW.updateForce(bo);
+        this.SE && this.SE.updateForce(bo);
+      }
+    }
+  }
+}

package/src/algorithm/force-atlas2/quad.ts

@@ -0,0 +1,117 @@
+import type { Point } from '../../types';
+
+/**
+ * @fileOverview quad
+ * @author shiwu.wyy@antfin.com
+ */
+
+type QuadProps = {
+  xmid: number;
+  ymid: number;
+  length: number;
+  massCenter?: Point;
+  mass?: number;
+};
+
+export default class Quad {
+  public xmid: number;
+  public ymid: number;
+  public length: number;
+  public massCenter: Point;
+  public mass: number;
+  constructor(params: QuadProps) {
+    /**
+     * the center position of this quad
+     * @type  {number}
+     */
+    this.xmid = params.xmid;
+    /**
+     * the center position of this quad
+     * @type  {number}
+     */
+    this.ymid = params.ymid;
+    /**
+     * the length of this quad
+     * @type  {number}
+     */
+    this.length = params.length;
+    /**
+     * the mass center of this quad
+     * @type  {number}
+     */
+    this.massCenter = params.massCenter || [0, 0];
+    /**
+     * the mass of this quad
+     * @type  {number}
+     */
+    this.mass = params.mass || 1;
+  }
+  getLength() {
+    return this.length;
+  }
+  contains(x: number, y: number) {
+    const halfLen = this.length / 2;
+    return (
+      x <= this.xmid + halfLen &&
+      x >= this.xmid - halfLen &&
+      y <= this.ymid + halfLen &&
+      y >= this.ymid - halfLen
+    );
+  }
+  // northwest quadrant
+  // tslint:disable-next-line
+  NW() {
+    const x = this.xmid - this.length / 4;
+    const y = this.ymid + this.length / 4;
+    const len = this.length / 2;
+    const params: QuadProps = {
+      xmid: x,
+      ymid: y,
+      length: len,
+    };
+    const NW = new Quad(params);
+    return NW;
+  }
+  // northeast
+  // tslint:disable-next-line
+  NE() {
+    const x = this.xmid + this.length / 4;
+    const y = this.ymid + this.length / 4;
+    const len = this.length / 2;
+    const params = {
+      xmid: x,
+      ymid: y,
+      length: len,
+    };
+    const NE = new Quad(params);
+    return NE;
+  }
+  // southwest
+  // tslint:disable-next-line
+  SW() {
+    const x = this.xmid - this.length / 4;
+    const y = this.ymid - this.length / 4;
+    const len = this.length / 2;
+    const params = {
+      xmid: x,
+      ymid: y,
+      length: len,
+    };
+    const SW = new Quad(params);
+    return SW;
+  }
+  // southeast
+  // tslint:disable-next-line
+  SE() {
+    const x = this.xmid + this.length / 4;
+    const y = this.ymid - this.length / 4;
+    const len = this.length / 2;
+    const params = {
+      xmid: x,
+      ymid: y,
+      length: len,
+    };
+    const SE = new Quad(params);
+    return SE;
+  }
+}