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=Prebuilt——VisActor/VGraph tutorial documents!!!###!!!!!!###!!!description=Built-in edges include the following types. For usage, see [Built-in Edges](/vgraph/demo/edges/defaultEdge)<img src="/vgraph/guide/edges/inset_edges.png" width="800">!!!###!!!

Built-in Edges

Built-in edges include the following types. For usage, see Built-in Edges

line

A normal polyline that connects several control points in sequence from the start point to the end point.

FieldTypeDefaultDescription
controlPointsnumber[][]Optional, provides several control points other than the start and end points. The polyline will pass through these points in sequence.

hLine

A horizontal turning line that extends from the start point to the end point in a horizontal, vertical, horizontal manner, resembling a Z-shaped polyline.

FieldTypeDefaultDescription
ignoreControlPointsbooleanfalseThe layout algorithm of vGraph may write control points on the edge. This configuration can be enabled to forcibly ignore them.
styles.radiusnumber5The radius of the corner.
styles.curvePositionnumber0.5The x-coordinate interpolation of the corner.
styles.curveOffsetnumber0The x-coordinate offset pixel value of the corner.

vLine

A vertical turning line that extends from the start point to the end point in a vertical, horizontal, vertical manner, resembling an N-shaped polyline.

FieldTypeDefaultDescription
ignoreControlPointsbooleanfalseThe layout algorithm of vGraph may write control points on the edge. This configuration can be enabled to forcibly ignore them.
styles.radiusnumber5The radius of the corner.
styles.curvePositionnumber0.5The y-coordinate interpolation of the corner.
styles.curveOffsetnumber0The y-coordinate offset pixel value of the corner.

turningLine

A free-form turning line that can be customized with several control points from the start point to the end point.

FieldTypeDefaultDescription
controlPointsnumber[][]Optional, provides several control points other than the start and end points. If this information is provided, styles.curvePosition will be ignored.
styles.radiusnumberThe radius of the corner. If this information is provided, styles.radian will be ignored (the visual effect of obtuse and acute angles varies greatly when using radius, so it is not recommended to use radius).
styles.radiannumber10The arc length of the corner.
styles.curvePositionnumber[][]The interpolation information of each control point relative to the center coordinates of the start node and the center coordinates of the end node.

quadratic

A quadratic Bézier curve that requires one control point in addition to the start and end points.

FieldTypeDefaultDescription
controlPointsnumber[][]Optional, provides one control point other than the start and end points. If this value is provided, the following configuration items will be automatically ignored.
styles.curveOffsetnumber-20The vertical distance of the control point from this vector.
styles.curvePositionnumber0.5The interpolation of the intersection of the perpendicular line of the control point and this vector on this vector.

cubic

A cubic Bézier curve, which is determined by four points P0, P1, P2, and P3. In addition to the start point P0 and the end point P3, two control points P1 and P2 are required.

FieldTypeDefaultDescription
controlPointsnumber[][]Optional, provides two control points other than the start and end points. If this value is provided, the following configuration items will be automatically ignored.
styles.curveOffsetnumber[][-20, 20]The vertical distance of each control point from this vector.
styles.curvePositionnumber[][0.5, 0.5]The interpolation of the intersection of the perpendicular line of each control point and this vector on this vector.

hCubic

A horizontal cubic Bézier curve, where the y-coordinate of P1 is the same as the start point P0, and the y-coordinate of P2 is the same as the end point P3.

FieldTypeDefaultDescription
styles.curvePositionnumber[0.5, 0.5]The x-coordinate interpolation of P1 and P2 within the start and end points.

vCubic

A vertical cubic Bézier curve, where the x-coordinate of P1 is the same as the start point P0, and the x-coordinate of P2 is the same as the end point P3.

FieldTypeDefaultDescription
styles.curvePositionnumber[0.5, 0.5]The y-coordinate interpolation of P1 and P2 within the start and end points.

loop

A self-loop is an edge that points from a node to itself. vgraph provides three types of self-loop styles that can be defined.

FieldTypeDefaultDescription
loop.themestringdefaultThe type of self-loop. Optional values are 'default' | 'round' | 'arc'.
loop.positionstringtopThe position of the self-loop. Optional values are 'top' | 'bottom' | 'left' | 'right'.
loop.distnumberautoThe distance between the highest point of the self-loop and the node.