交互

addBehaviors(behaviors, modes)

新增行为，将单个或多个行为添加到单个或多个模式中。

参数

用法

// 将单个Behavior添加到单个模式（默认的default模式）中
graph.addBehaviors('click-select', 'default');
// 将多个Behavior添加到单个模式（默认的default模式）中
graph.addBehaviors(['brush-select', 'click-select'], 'default');
// 将单个Behavior添加到多个模式中
graph.addBehaviors('brush-select', ['default', 'select']);
// 将多个Behavior添加到多个模式中
graph.addBehaviors(['brush-select', 'click-select'], ['default', 'select']);

removeBehaviors(behaviors, modes)

移除行为，将单个或多个行为从单个或多个模式中去除。

参数

用法

// 从单个模式中移除单个Behavior
graph.removeBehaviors('click-select', 'default');
// 从单个模式中移除多个Behavior
graph.removeBehaviors(['brush-select', 'click-select'], 'default');
// 从多个模式中移除单个Behavior
graph.removeBehaviors('brush-select', ['default', 'select']);
// 从多个模式中移除多个Behavior
graph.removeBehaviors(['brush-select', 'click-select'], ['default', 'select']);

setMode(mode)

切换图行为模式。主要用于不同模式下的行为切换，如从编辑模式下切换到只读模式。

参数

用法

const graph = new G6.Graph({
    container: div,
    width: 500,
    height: 500,
    pixelRatio: 2,
    modes: {
      default: [...],
      custom: [...]
    }
})
graph.setMode('custom')

getCurrentMode()

获取当前的行为模式。

该方法无参数。

返回值

• 返回值类型：string；
• 返回值表示当前的行为模式。

用法

// 返回值mode表示当前的行为模式
const mode = graph.getCurrentMode();

getZoom()

获取当前视口的缩放比例。

该方法无参数。

返回值

• 返回值类型：number；
• 返回值表示当前视口的缩放比例， 默认值为 1。

用法

// 返回值zoom表示当前视口的缩放比例
const zoom = graph.getZoom();

zoom(ratio, center)

改变视口的缩放比例，在当前画布比例下缩放，是相对比例。

参数

用法

// 以(100, 100)为中心点，放大3倍
graph.zoom(3, { x: 100, y: 100 });
// 以当前元素位置为中心，缩小到0.5
graph.zoom(0.5);

zoomTo(toRatio, center)

缩放视窗窗口到一个固定比例。

参数

用法

// 以(100, 100)为中心点，放大3倍
graph.zoomTo(3, { x: 100, y: 100 });
// 以当前元素位置为中心，缩小到0.5
graph.zoomTo(0.5);

focusItem(item)

将元素移动到视口中心，该方法可用于做搜索后的缓动动画。

参数

用法

graph.focusItem(item);

changeSize(width, height)

改变画布大小。

参数

用法

graph.changeSize(600, 350);

translate(dx, dy)

采用相对位移来平移画布。

参数

用法

graph.translate(100, 100);

moveTo(x, y)

采用绝对位移将画布移动到指定坐标。

参数

用法

graph.moveTo(200, 300);

fitView(padding)

让画布内容适应视口。

参数

用法

// padding只设置为一个值，则表示top = right = bottom = left = 20
graph.fitView(20);
// 等价于graph.fitView(20)
graph.fitView([20]);
// padding设置为数组，只传2个值，则top = bottom = 20, right = left = 10
graph.fitView([20, 10]);
// padding设置为数组，四个方向值都指定
graph.fitView([20, 10, 20, 15]);