View Port Operation

4 min read

graph.getZoom()

Get the current zoom ratio.

Return

  • Type of return value: Number;
  • The return value indicates the current zoom ratio of view port. The default value is 1.

Usage

// The return value indicates the current zoom ratio
const zoom = graph.getZoom();

graph.changeSize(width, height)

Change the size of the canvas.

Parameters

NameTypeRequiredDescription
widthNumbertrueThe width of the canvas.
heightNumbertrueThe height of the canvas.

Usage

graph.changeSize(600, 350);

graph.translate(dx, dy)

Move the canvas with relative displacement.

Parameters

NameTypeRequiredDescription
dxNumbertrueDisplacement in the horizontal direction.
dyNumbertrueDisplacement in the vertical direction.

Usage

graph.translate(100, 100);

graph.moveTo(x, y, animate, animateCfg)

Move the canvas to a fixed position.

Parameters

NameTypeRequiredDescription
xNumbertrueDisplacement in the horizontal direction.
yNumbertrueDisplacement in the vertical direction.
animatebooleanfalseWhether move the graph with animation. If it is not assigned, animates following the graph's animate.
animateCfgObjectfalseThe animation's configuraiton. Its configurations can be found in Basic Animation Docs. If it is not assigned, animates following the graph's animateCfg.

Usage

graph.moveTo(200, 300);

// with animation
graph.moveTo(200, 300, true, {
  duration: 100,
});

graph.fitView(padding)

Fit the graph to the view port.

Parameters

NameTypeRequiredDescription
paddingNumber / ArrayfalseThe padding of [top, right, bottom, left].
rules{ onlyOutOfViewPort?: boolean; direction?: 'x''y''both'; ratioRule?: 'max''min}falserules of fitView

Usage

// When padding is a number, top = right = bottom = left = 20
graph.fitView(20);

// Equal to graph.fitView(20)
graph.fitView([20]);

// When padding is an array with 2 values, top = bottom = 20, right = left = 10
graph.fitView([20, 10]);

// When padding is an array with four values
graph.fitView([20, 10, 20, 15]);

// Use fitViewByRules, default rules: onlyOutOfViewPort = false, direction = 'both', ratioRule = 'min'
graph.fitViewByRule(0, {});

// use fitViewByRules, custom rules
graph.fitView(0, { onlyOutOfViewPort: true, direction: 'y' });

graph.fitCenter()

Supported by v3.5.1. Translate the graph to align its center with the canvas.

Usage

// Call the following function after rendering and animation
graph.fitCenter();

graph.focusItem(item, animate, animateCfg)

Move the graph to center at the item. This operation can be used as easing animation after searching a node.

Parameters

NameTypeRequiredDescription
itemstring / ObjecttrueThe id or the instance of the item.
animatebooleanfalseWhether move the graph with animation. If it is not assigned, animates following the graph's animate.
animateCfgObjectfalseThe animation's configuraiton. Its configurations can be found in Basic Animation Docs. If it is not assigned, animates following the graph's animateCfg.

Usage

graph.focusItem(item);

// focus with animation
graph.focusItem(item, true);

// focus with animation and animation's configuration
graph.focusItem(item, true, {
  easing: 'easeCubic',
  duration: 400,
});