Item是G6中绘图元素实例,目前包含节点和边的实例。对于实例的变更建议在graph上进行。


更新

update(model)

根据元素数据项,更新元素。


参数

名称

类型

是否必选

描述

model

object

true

元素描述项,包括数据和样式

提示 其中参数model可包括以下属性:

名称

类型

是否必选

描述

id

string

true

元素ID,必须唯一

style

object

false

元素样式

shape

string

false

元素的形状,不传则使用默认值

label

string

false

元素label,有该字段时默认会渲染label

用法
const model = {
	id: 'node',
  shape: 'rect',
  label: 'node',
  style: {
  	fill: 'red'
  }
}

item.update(model)


refresh()

刷新元素,包括更新元素位置,更新元素样式,清除之前的缓存。


一般在以下情况时,会刷新元素:


用法
item.refresh()


updatePosition(cfg)

更新元素位置,避免整体重新绘制。


参数

名称

类型

是否必选

描述

cfg

object

true

元素配置项,包括x、y属性,如果参数中无x、y属性,则更新时使用数据项中的值。

用法
const cfg = {
	x: 100,
  y: 200
}
// 此时更新时,使用参数中的x、y坐标
item.updatePosition(cfg)

const cfg1 = {
	name: 'abc',
  dept: 'antv'
}
// 此时更新时,使用item.getModel()中的x、y坐标值
item.updatePosition(cfg1)


销毁

destroy()

销毁元素,主要包括停止动画、删除group中的所有元素、清空配置项、设置destroyed为true等操作。


用法
item.destroy()


通用

getBBox()

获取元素的包围盒。


返回值


返回值对象包括以下属性:

名称

类型

描述

x

number

视口x坐标

y

number

视口y坐标

width

number

bbox宽度

height

number

bbox高度

centerX

number

中心点x坐标

centerY

number

中心点y坐标

用法
item.getBBox()


getContainer()

获取元素的容器。


返回值


用法
// 获取元素的容器
const group = item.getContainer()

// 等价于
const group = item.get('group')

getKeyShape()

获取元素的关键形状,用于计算节点大小、连线截距等。


返回值


用法
// 获取元素的容器
const keyShape = item.getKeyShape()

// 等价于
const keyShape = item.get('keyShape')


getModel()

获取元素的数据模型。


返回值


用法
// 获取元素的容器
const model = item.getModel()

// 等价于
const model = item.get('model')


getType()

获取元素的类型。


返回值


用法
// 获取元素的容器
const type = item.getType()

// 等价于
const type = item.get('type')


enableCapture(enable)

是否拾取及触发该元素的交互事件。


参数

名称

类型

是否必选

描述

enable

boolean

true

是否允许该元素响应事件的标识,如果为true,则允许,否则不允许

用法
// 不允许元素响应事件
item.enableCapture(false)

// 允许元素响应事件
item.enableCapture(true)


clearCache()

更新或刷新等操作后,清除缓存。


用法
// 清除缓存
item.clearCache()


状态

show()

显示元素。


用法
item.show()


hide()

隐藏元素。


用法
item.hide()


changeVisibility(visible)

更改元素是否显示。


参数

名称

类型

是否必选

描述

visible

boolean

true

是否显示元素,true为显示,false为隐藏

用法
// 显示元素
item.changeVisibility(true)

// 隐藏元素
item.changeVisibility(false)


isVisible()

查询元素显示状态。


返回值


用法
const visible = item.isVisible()

toFront()

将元素的层级设置到最上层,即当有元素重叠时,将元素置于顶层。


用法
item.toFront()


toBack()

将元素的层级设置到最下层,即当有元素重叠时,将元素置于底层。


用法
item.toBack()


setState(state, enable)

更新元素的状态。


参数

名称

类型

是否必选

描述

state

string

true

元素的状态,如selected、hover

enable

boolean

true

是否启用状态的标识,为true表示启用该状态,否则不启用。

用法
item.setState('selected', true)
item.setState('actived', false)


clearStates(states)

清除指定的状态。


参数

名称

类型

是否必选

描述

states

string | array

true

要清除的元素状态

用法
// 清除selected状态
item.clearStates('selected')

// 清除active的、hover状态
item.clearStates(['actived', 'hover'])



getStates()

获取当前元素的所有状态。


返回值


用法
// 获取元素的所有状态
const states = item.getStates()


hasState(state)

判断元素是否具有某种指定的状态。


参数

名称

类型

是否必选

描述

state

string

true

元素的状态

返回值


用法
// 获取元素的所有状态
const state = item.hasState('hover')


样式

getStateStyle(state)

获取元素指定状态的样式,返回的样式会将全局样式、默认样式和元素自定义样式合并。


参数

名称

类型

是否必选

描述

state

string

true

元素的状态

返回值


用法
// 获取元素的指定状态的样式
const style = item.getStateStyle('selected')


getOriginStyle()

获取元素keyShape的样式。


返回值


用法
const style = item.getKeyShapeStyle()


getCurrentStatesStyle()

获取当前元素的所有状态的样式。


返回值


用法
const styles = item.getCurrentStatesStyle()