MDS High-dimensional Data Dimensionality Reduction Layout

Overview

MDS (Multidimensional Scaling) is a classic dimensionality reduction algorithm. In G6, the MDS layout constructs a distance matrix between nodes and restores their relative distances in high-dimensional space as much as possible in 2D space. It is suitable for graph visualization scenarios that show similarity, distance, or structural relationships between nodes.

Use Cases

Data dimensionality reduction visualization
Displaying distance relationships between nodes

Configuration

const graph = new Graph({
  layout: {
    type: 'mds',
    center: [300, 300],
    linkDistance: 100,
  },
});

Options

Option	Description	Type	Default	Required
type	Layout type	`mds`	-	Yes
center	Center position of the layout	`[number,number]`	canvas center	No
linkDistance	Ideal length of edges (spring length)	`number`	200	No

center

The center coordinates of the layout. All nodes will be symmetrically distributed around this point.

linkDistance

number Default: 50

The ideal distance between nodes. The larger the value, the more dispersed the nodes.

Code Example


import { Graph } from '@antv/g6';

const data = {
  nodes: Array.from({ length: 25 }, (_, i) => ({
    id: `node-${i}`,
    data: {
      value: Math.random() * 100,
    },
  })),
  edges: Array.from({ length: 20 }, (_, i) => ({
    id: `edge-${i}`,
    source: `node-${Math.floor(Math.random() * 25)}`,
    target: `node-${Math.floor(Math.random() * 25)}`,
  })),
};

const graph = new Graph({
  container: 'container',
  width: 600,
  height: 300,
  autoFit: 'view',
  data,
  node: {
    style: {
      labelText: (d) => d.id,
    },
  },
  layout: {
    type: 'mds',
    nodeSize: 32,
    linkDistance: 100,
  },
  behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}