VGraph 0.1.0
Graph Examples
Tutorials
Changelog
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

VGraph Relationship Explorer

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=Options——VisActor/VGraph tutorial documents!!!###!!!!!!###!!!description=The Graph accepts data in a node-edge-group structure (see the [Data Structure](/vgraph/guide/data-structure) section for details) and is typically used for displaying and analyzing directed graphs, force-directed graphs, and network graphs. The general usage is as follows:```typescriptimport { Graph } from '@visactor/vgraph';const graph = new Graph(options); // Graph configuration optionsgraph.data(someData); // Write data, which will generally render the result directly```!!!###!!!

Graph Configuration

The Graph accepts data in a node-edge-group structure (see the Data Structure section for details) and is typically used for displaying and analyzing directed graphs, force-directed graphs, and network graphs. The general usage is as follows:

import { Graph } from '@visactor/vgraph';

const graph = new Graph(options);  // Graph configuration options
graph.data(someData);              // Write data, which will generally render the result directly

Configuration Options

FieldTypeDescription
containerDOMNode | string[Required] The graph container, which can be a DOM node or the ID of a DOM.
widthnumber[Required] Sets the graph width.
heightnumber[Required] Sets the graph height.
renderMode'canvas' | 'dom'[NEW] Specifies whether to use canvas or an external DOM component to render nodes. Defaults to canvas. Used with vgraph-react or vgraph-vue.
layout{ type: string, options: LayoutOptions } | LayoutBase[NEW] Specifies the graph layout type and custom configuration options, or directly passes a layout instance to specify the graph layout. See "Layout" for layout types and configuration options.
autoLayoutboolean[NEW] Automatic layout switch, on by default. When on, the layout will automatically refresh after adding, deleting, or modifying nodes using graph methods. It is recommended to temporarily turn this off for batch additions, deletions, or modifications to improve performance.
setDefaultNode(nodeData) => NodeConfigsBatch sets the configuration of nodes in the graph. See Node Configuration Options for specific configuration items.
setNodeStateStyles(state: string, nodeData: any, node: Node) => keyShapeStylesSets the style of the node's keyShape in a specific state.
setDefaultEdge(edgeData) => StateConfigsBatch sets the configuration of edges in the graph. See Edge Configuration Options for specific configuration items.
setEdgeStateStyles(state:string, edgeData: any, edge: Edge) => keyShapeStylesSets the style of the edge's keyShape in a specific state.
setDefaultGroup(groupData) => GroupConfigsBatch sets the configuration of groups in the graph. See Group Configuration Options for specific configuration items.
setGroupStateStyles(state: string, groupData: any, group: Group) => keyShapeStylesSets the style of the group's keyShape in a specific state.
paddingnumber | number[]Specifies the padding at the edge of the graph, used for situations like viewport adaptation.
minRationumberSpecifies the minimum zoom ratio of the graph.
maxRationumberSpecifies the maximum zoom ratio of the graph.
autoDrawbooleanWhether to automatically redraw after updating graph settings or calling instance methods. Defaults to true. When performing batch operations, setting this to false first and then actively drawing after the operations can provide better performance.
linkCenterbooleanWhether the edge directly connects to the center of the node. Defaults to false. Batch calculating the connection points of edges has a certain cost. If there are no requirements for the connection points of nodes and edges (no Anchor is set) and when the nodes are opaque, setting this to true can improve performance.
throwErrorbooleanWhether to throw exceptions directly, defaults to true. If in a production environment, or if you believe some exceptions can be tolerated, you can set this to false. In that case, exception information will be reminded in the form of console.error.

setDefault[Node | Edge | Group]

Typically, after the front end obtains the original data through a request, it needs to traverse and write the configuration for the corresponding instances. Therefore, we provide the shortcut method setDefault[Node | Edge | Group] for configuration. The advantage of this is that if there are subsequent data additions or modifications, vGraph can directly get the corresponding configuration and apply it through the corresponding method. It is recommended to use this method to configure each instance. Taking nodes as an example, the configuration priority is:

Original data configuration > setDefaultNode configuration > vGraph default configuration

set[Node | Edge | Group]StateStyles

vGraph provides a state mechanism for common micro-interaction responses in graphs. It is recommended to use the state mechanism to quickly implement simple hover, highlight, and disable states. For a detailed introduction, please see State Management.