Compared to 2.x, 3.x mainly focuses on plugin consolidation (unified export), optimized default interactions, introduces animation capabilities, and adds virtual rendering support. The upgrade cost is low.

Overview

• Plugin and subpackage consolidation: @antv/x6-plugin-xxxx, @antv/x6-common, and @antv/x6-geometry are merged into the main @antv/x6 package and exported from there.
• Default interaction tweak: canvas panning is enabled by default.
• New animation capability: supports imperative, declarative, and custom Shape-based animations.
• With Scroller, virtual rendering is available via virtual: true for large graphs.

Upgrade Guide

package.json

3.x merges commonly used plugins and subpackages into @antv/x6, so you no longer need to install separate @antv/x6-plugin-xxxx packages. Additionally, the utility package @antv/x6-common and geometry package @antv/x6-geometry are now part of the main package, and their APIs should be imported from @antv/x6.

{
  "@antv/x6": "^3.0.0"
}

Remove the following dependencies if present:

• @antv/x6-plugin-selection
• @antv/x6-plugin-transform
• @antv/x6-plugin-scroller
• @antv/x6-plugin-keyboard
• @antv/x6-plugin-history
• @antv/x6-plugin-clipboard
• @antv/x6-plugin-snapline
• @antv/x6-plugin-dnd
• @antv/x6-plugin-minimap
• @antv/x6-plugin-stencil
• @antv/x6-plugin-export
• @antv/x6-common
• @antv/x6-geometry

Import Path Changes

Starting from 3.x, the plugins above are exported from @antv/x6. Usage remains the same; simply replace the import path:

// 2.x
import { Scroller } from '@antv/x6-plugin-scroller'
import { Selection } from '@antv/x6-plugin-selection'
graph.use(new Scroller())
graph.use(new Selection())

// 3.x
import { Scroller, Selection } from '@antv/x6'
graph.use(new Scroller())
graph.use(new Selection())

In 3.x, utilities and geometry types previously imported from @antv/x6-common and @antv/x6-geometry are now exported directly from @antv/x6. You only need to update the import path:

// 2.x
import { Dom, FunctionExt } from '@antv/x6-common'
import { Point, Rectangle } from '@antv/x6-geometry'

// 3.x
import { Dom, FunctionExt, Point, Rectangle } from '@antv/x6'

New Animation Capability

3.x introduces animate and removes the 2.x transition API, making it easier to add effects to nodes and edges.

See more: Animation Docs.

Configuration Changes

• Graph panning panning is enabled by default (enabled: true). To disable, set panning: false.
• When graph panning conflicts with Selection rubberband triggers, Selection takes precedence.
• With Scroller, graph panning is disabled by default to avoid interaction conflicts, and virtual rendering can be enabled via virtual: true.

Shape Packages Upgrade (React/Vue/Angular)

• X6 3.x must use the 3.x versions of the shape packages: @antv/x6-react-shape@^3.x, @antv/x6-vue-shape@^3.x, and @antv/x6-angular-shape@^3.x.

{
  "@antv/x6-react-shape": "^3.0.0",
  "@antv/x6-vue-shape": "^3.0.0",
  "@antv/x6-angular-shape": "^3.0.0"
}

React Provider API Change

Change 2.x Portal.getProvider() to 3.x getProvider():

// 2.x
import { Portal } from '@antv/x6-react-shape'
const Provider = Portal.getProvider()

// 3.x
import { getProvider } from '@antv/x6-react-shape'
const Provider = getProvider()