Item Overview

2 min read

There are three types of items in a graph in G6: Nodes, Edges and Combos. Each item consists of one or more Shapes with its own unique keyShape. Several built-in items are provided by G6, for example, nodes can be circles, rectangles, images, etc. All built-in items in are listed in Built-in Nodes, Built-in Edges, Built-in Combos. In addition to using built-in nodes/edges/combos, G6 also allows user to customize these items by creating and combining shapes, see Custom Nodes, Custom Edge, Custom Combo for more details.

The properties of an item can be be divided into two categories:

  • Style Property: Corresponds to the style of the keyshape, e.g. fill, stroke.When the State of an item is changed, the style can be updated.
  • Other Property: Such as type, id, they are a kind of properties that will not be changed when the State of the item is changed. They need to be updated manually with graph.updateItem. A complete list of item properties can be found in Item Properties. In addition to these common properties shared by all items, each kind of item (node/edge/combo) has its unique properties.

There are common methods on item instances for updating, destroying, getting attributes, modifying state, etc. And changes to instances can also be made by calling methods on graph.

This chapter provides an overview of the common properties and methods of graph items in G6, different types of items, i.e. nodes, edges and combos, will be described in detail in later chapters.