Combines multiple G6 plugins into a list that can be passed to a G6 graph configuration. G6 plugins extend the functionality of the base graph visualization with additional features.
Details
G6 plugins provide extended functionality beyond the core graph visualization capabilities. Plugins are divided into several categories:
Visual Style Enhancement
Grid Line (grid-line): Displays grid reference lines on the canvas
Background (background): Adds background images or colors to the canvas
Watermark (watermark): Adds a watermark to the canvas to protect copyright
Hull (hull): Creates an outline for a specified set of nodes
Bubble Sets (bubble-sets): Creates smooth bubble-like element outlines
Snapline (snapline): Displays alignment reference lines when dragging elements
Navigation and Overview
Minimap (minimap): Displays a thumbnail preview of the graph, supporting navigation
Fullscreen (fullscreen): Supports full-screen display and exit for charts
Timebar (timebar): Provides filtering and playback control for temporal data
Interactive Controls
Toolbar (toolbar): Provides a collection of common operation buttons
Context Menu (contextmenu): Displays a menu of selectable operations on right-click
Tooltip (tooltip): Displays detailed information about elements on hover
Legend (legend): Displays categories and corresponding style descriptions of chart data
Note
You can also build your own plugins as described at https://g6.antv.antgroup.com/en/manual/plugin/custom-plugin.
Examples
# Create a configuration with multiple plugins
plugins <- g6_plugins(
minimap(),
grid_line(),
tooltips(
getContent = JS("(e, items) => {
return `<div>${items[0].id}</div>`;
}")
)
)
# Add a context menu and toolbar
plugins <- g6_plugins(
context_menu(
key = "my-context-menu",
className = "my-context-menu",
trigger = "click",
offset = c(10, 10),
getItems = JS("(event) => {
const type = event.itemType;
const isNode = type === 'node';
return [
{ key: 'delete', text: 'Delete' },
{ key: 'edit', text: 'Edit' },
{ key: 'details', text: 'View Details', disabled: !isNode }
];
}"),
onClick = JS("(value, target, current) => {
if (value === 'delete') {
// do stuff
}")
),
toolbar(
position = "top-right",
getItems = JS("() => [
{ id: 'zoom-in', value: 'zoom-in' },
{ id: 'zoom-out', value: 'zoom-out' },
{ id: 'fit', value: 'fit' }
]"),
onClick = JS("(value) => {
if (value === 'zoom-in') graph.zoomTo(1.1);
else if (value === 'zoom-out') graph.zoomTo(0.9);
else if (value === 'fit') graph.fitView();
}")
)
)