It is not only a fully functional graph visualization library, but also an explorer of data relationships.
!!!###!!!title=Background——VisActor/VGraph tutorial documents!!!###!!!!!!###!!!description=In graph editing scenarios, a grid background is usually needed for auxiliary editing. The Background component has two built-in background styles: 'dot' and 'grid'.The following is an example of how to use the Background component. You can also experience it in the demo.```javascriptimport { Graph, Background } from "@visactor/vgraph";const background = new Background(graph, { type: 'dot' });```!!!###!!!
Background
In graph editing scenarios, a grid background is usually needed for auxiliary editing. The Background component has two built-in background styles: 'dot' and 'grid'.
The following is an example of how to use the Background component. You can also experience it in the demo.
import { Graph, Background } from "@visactor/vgraph";
const background = new Background(graph, { type: 'dot' });
Configuration Items
BackgroundOptions is defined as follows.
Field
Type
Description
type
'grid' | 'dot'
Grid style type. Default is 'grid'.
step
number
Step size. By default, it is consistent with the step size of the Grid component.
backgroundColor
string
Background color. Default is pure white '#FFFFFF'.
opacity
number
Background opacity.
color
string
Foreground color. Depending on the type, it is either the grid line color or the dot fill color.
imgUrl
string
Custom background image. Default is empty.
Instance Methods
Instance Method
Return Value
Description
enable()
void
Enable the component.
disable()
void
Disable the component.
changeSize()
void
Change the width and height to fit the width and height of the Graph.
