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=Data Lineage——VisActor/VGraph tutorial documents!!!###!!!!!!###!!!description=DataLineageGraph is a data lineage graph component, an out-of-the-box solution designed for data lineage scenarios. It has been implemented in scenes like coral lineage graph. This component supports two display forms: [Table View](/vgraph/demo/solutions/dataLineage) and [Column View](/vgraph/demo/solutions/columnLineage). It is imported as follows:```javascriptimport { DataLineageGraph } from '@visactor/react-vgraph';() => <DataLineageGraph ...options />```!!!###!!!

Data Lineage Graph Solution

DataLineageGraph is a data lineage graph component, an out-of-the-box solution designed for data lineage scenarios. It has been implemented in scenes like coral lineage graph. This component supports two display forms: Table View and Column View. It is imported as follows:

import { DataLineageGraph } from '@visactor/react-vgraph';

() => <DataLineageGraph ...options />

Configuration Options

FieldTypeDescription
dataGraphStructureThe data lineage component accepts data of type GraphStructure. The structure is slightly different for table view and column view (mode = 'table' || mode = 'column'). In table view, node data corresponds to nodes and relationships to edges, without the need to specify groups. Grouping is implemented internally by getGroupData. In column view, field data corresponds to nodes, relationships to edges, and table data to groups, with each table containing several fields.
baseTableIdstringThe id of the main node. In table mode, this is the node id. In column mode, this should be the id of the corresponding group.
mode'table' | 'column'Table view | Column view
sizenumber[]The size of the graph container, size:[800, 600] means the container is 800px wide and 600px high.
minDepthnumberThe lineage level, upstream is negative. -1 represents one level upstream. Required for table view. Used to ensure the number of columns remains unchanged before and after filtering.
maxDepthnumberThe lineage level, downstream is positive. 1 represents one level downstream. Required for table view. Used to ensure the number of columns remains unchanged before and after filtering.
optionsIOptionsPersonalized customization options.

The personalized customization options included in IOptions are as follows:

FieldTypeDescription
tableHeightnumberThe height of the node, with three levels: 60px, 40px, 32px, corresponding to table view with more attributes, regular table view, and regular column view.
groupGapnumberThe gap width between each layer, default is 50.
getGroupWidth(depth: number, count: number) => numberGet the layer width. 304 for table view, 240 for column view.
activeColumnstring[][Column View] The currently checked fields of the main table.
getGroupData(data: tableData) => string;[Table View] The grouping method. Given each node's data, returns the grouping value.
filter{ type: string; value: string[];}[Table View] Filter based on the given filter type and value.
minDepthnumberThe minimum level limit, upstream is negative.
maxDepthnumberThe maximum level limit, downstream is positive.
getEdgeStyles(sourceId: string, targetId: string) => objectThe style of the edge in its default state. Default is: { strokeStyle: '#D1D5DA',lineWidth: 1,hitWidth: 6, }.
getEdgeHighlightStyles(sourceId: string, targetId: string) => object;The style of the edge in its highlighted state, which will be merged with the default state style. Default is: { strokeStyle: '#3073F2'}.
getGroupTitle(groupData: any) => ReactNode[Table View] Get the display content of the group title for each level.
getGroupContent(groupData: any) => ReactNode[Column View] Get the display content of the table header.
getGroupName(groupData: any) => stringGet the group name, and render the group title with the default style.
getTableContent(tableData, group: any) => ReactNode | stringGet the node content.
getEmptyContent(group: any) => ReactNode | stringGet the content to display for an empty column. Default is null, no display.
getTaskTooltipContent(edgeData.taskEntity[]) => string | ReactNodeGet the tooltip content for an edge. Requires the taskEntity field in the edge data to correspond to the task data.
onClickTable(tableData) => voidThe click event for a node.
onClickEdge(edgeData) => voidThe click event for an edge.
highlightEdgebooleanWhether to enable edge hover and tooltip display interaction.
highlightMode"MAIN" | "ALL"The highlight mode after clicking a node. Default is "MAIN", which only highlights upstream or downstream. Set to "ALL" to highlight both upstream and downstream.
search(nodeData: any) => booleanDefine how to accurately search for a node. If no matching node is found, the onEmptySearch method will be called.
onEmptySearch() => voidCalled when the search result is empty.