g6/packages/site/docs/api/Items/itemMethods.en.md

title	order
item.*	0

Item is the object of node / edge in G6.

Update

item.update(model)

Update the item according to the data model.

Parameters

Name	Type	Required	Description
model	Object	true	The data model of the item.

Tips: model contains:

Name	Type	Required	Description
id	String	true	The unique id of the item.
style	Object	false	The style of the item.
type	String	false	The type of the item. The default type for edge is 'line', the default type for node is 'circle'. The default shapes will take effect when type is null.
label	String	false	The label of the item. A label will be rendered if it exists.

Usage

const model = {
  id: 'node',
  type: 'rect',
  label: 'node',
  style: {
    fill: 'red',
  },
};

item.update(model);

item.refresh()

Refresh the item with its positions and style in the item's data model. This operation will clear the cache in the same time.

It is usually called after:

• The data model of item is changed;
• The positions of endpoints of an edge is changed.

Usage

item.refresh();

item.updatePosition(cfg)

Update the position of the item. We recommend to call this function for single item to avoid repainting the whole canvas.

Parameters

Name	Type	Required	Description
cfg	Object	true	The configurations of the item, including x and y. The x and y value in source data model will take effect if there are no x and y in cfg.

Usage

const cfg = {
  x: 100,
  y: 200,
};
// There are x and y in cfg, so the operation below will update the position
item.updatePosition(cfg);

const cfg1 = {
  name: 'abc',
  dept: 'antv',
};
// There are no x and y in cfg, the operation below will use x and y in item.getModel()
item.updatePosition(cfg1);

Destroy

item.destroy()

Destroy an item, including stopping the animation, deleting the items in a group, clearing the configurations, setting the destroyed to be true, and so on.

Usage

item.destroy();

Common Usage

item.getBBox()

Get the bounding box of the item.

Return

• The type of return value: Object.

The return value includes:

Name	Type	Description
x	number	The x coordinate of view port.
y	number	The y coordinate of view port.
width	number	The width of the bbox.
height	number	The height of the bbox.
centerX	number	The x coordinate of the center of the bbox.
centerY	number	The y coordinate of the center of the bbox.

Usage

item.getBBox();

item.getContainer()

Get the container of the item.

Return

• The type of return value: G.Group;
• Return the graphics group where the item in.

Usage

// Get the container of the item
const group = item.getContainer();

// Equals to
const group = item.get('group');

item.getKeyShape()

Get the key shape of the item. keyShape is used for calculating the node size, edge length, and so on.

Return

• The type of return value: G.Shape;
• Return the keyShape of the item.

Usage

// Get the keyShape of the item
const keyShape = item.getKeyShape();

// Equals to
const keyShape = item.get('keyShape');

item.getModel()

Get the data model of the item.

Return

• The type of return value: Object;
• Return the data model of the item.

Usage

// Get the data model of the item
const model = item.getModel();

// Equals to
const model = item.get('model');

item.getType()

Get the type of the item.

Return

• The type of return value: String;
• Return the type of the item. It might be 'node' or 'edge'.

Usage

// Get the type of the item
const type = item.getType();

// Equals to
const type = item.get('type');

item.enableCapture(enable)

Whether to enable the item to be picked and enable its interaction events.

Parameters

Name	Type	Required	Description
enable	Boolean	true	The flag to enable if it is true.

Usage

// Do not allow the item response interaction events
item.enableCapture(false);

// Allow the item to response the interaction events
item.enableCapture(true);

item.clearCache()

Clear the cache. It is usually called after updating or refreshing operation.

Usage

// Clear the cache
item.clearCache();

State

item.show()

Show the item. Show the item itself. Different from that, when the item is a node, graph.showItem(item) will show the node and its related edges in the same time.

Usage

item.show();

item.hide()

Hide the item. Hide the item itself. Different from that, when the item is a node, graph.hideItem(item) will hide the node and its related edges in the same time.

Usage

item.hide();

item.changeVisibility(visible)

Change the visibility of the item.

Parameters

Name	Type	Required	Description
visible	Boolean	true	The flag to hide or show the item. true means show the item, false means hide the item.

Usage

// Show the item
item.changeVisibility(true);

// Hide the item
item.changeVisibility(false);

item.isVisible()

Query the visibility of the item.

Return

• The type of return value: Boolean;
• true means the item is visibile. The item is invisible otherwise.

Usage

const visible = item.isVisible();

item.toFront()

Set the visual level / zindex to the front to avoid being overlapped by other items.

Usage

item.toFront();

item.toBack()

Set the visual level / zindex to the back.

Usage

item.toBack();

item.setState(state, enable)

Update the state of the item.

Parameters

Name	Type	Required	Description
state	String	true	The state name of the item, e.g. 'selected', 'hover'.
enable	Boolean	true	The flag to enable the state if it is true.

Usage

item.setState('selected', true);
item.setState('actived', false);

item.clearStates(states)

Clear all the states of the item. If the states is null, this operatcion will clear the first state of the item by default.

Parameters

Name	Type	Required	Description
states	String / Array	true	The names of the states to be cleared.

Usage

// Clear the state 'selected'
item.clearStates('selected');

// Clear the states 'active' and 'hover'
item.clearStates(['actived', 'hover']);

item.getStates()

Get all the states of the item.

Return

• The type of return value: Array;
• Returns an array of strings, which are the states of the item.

Usage

// Get all the states of the item
const states = item.getStates();

item.hasState(state)

Query the state value of the node.

Parameters

Name	Type	Required	Description
state	String	true	The state name.

Return

• The type of return value: Boolean;
• Returns true if the item has the state. false otherwise.

Usage

// Query value of state 'hover'
const state = item.hasState('hover');

Style

item.getStateStyle(state)

Get the style of the item. The global style, default style, and custom style will be mixed in the return value.

Parameters

Name	Type	Required	Description
state	String	true	The state name.

Return

• The type of return value: Object；
• The global style, default style, and custom style will be mixed in the return value.

Usage

// Get the item's style of state 'selected'
const style = item.getStateStyle('selected');

item.getOriginStyle()

Get the keyShape's style of the item.

Return

• The type of return value: Object | undefined;
• Returns the style of the keyShape if it exists. Returns undefined otherwise.

Usage

const style = item.getOriginStyle();

item.getCurrentStatesStyle()

Get the item's styles of all the states.

Return

• The type of return value: Object；
• Returns the item's styles of all the states.

Usage

const styles = item.getCurrentStatesStyle();