g6R: Graph Visualisation Engine Widget for R and 'shiny' Apps

Description

Create stunning network experiences powered by the 'G6' graph visualisation engine 'JavaScript' library https://g6.antv.antgroup.com/en. In 'shiny' mode, modify your graph directly from the server function to dynamically interact with nodes and edges. Select your favorite layout among 20 choices. 15 behaviors are available such as interactive edge creation, collapse-expand and brush select. 17 plugins designed to improve the user experience such as a mini-map, toolbars and grid lines. Customise the look and feel of your graph with comprehensive options for nodes, edges and more.

Author(s)

Maintainer: David Granjon dgranjon@ymail.com

Authors:

• David Schoch david@schochastics.net

Other contributors:

• cynkra GmbH [funder]

• Bristol Myers Squibb [funder]

See Also

Useful links:

• https://github.com/cynkra/g6R

• https://cynkra.github.io/g6R/

• Report bugs at https://github.com/cynkra/g6R/issues

Marks as string to be processed as a JS function

Description

Useful for htmlwidgets

Usage

JS(...)

Arguments

Value

A character vector with class "JS_EVAL" that can be used in htmlwidgets to mark is as a JavaScript function.

Create Animation Configuration for G6 Graphs

Description

Configures animation settings for G6 graph elements. These settings control how graph elements animate when changes occur.

Usage

animation_config(
  delay = NULL,
  direction = c("forward", "alternate", "alternate-reverse", "normal", "reverse"),
  duration = NULL,
  easing = NULL,
  fill = c("none", "auto", "backwards", "both", "forwards"),
  iterations = NULL
)

Arguments

Details

Animation configuration allows fine-tuning the timing and behavior of animations in G6 graphs. This includes controlling the duration, delay, easing function, direction, and other aspects of how graph elements animate.

Value

A list containing animation configuration that can be passed to g6_options().

Examples

# Basic animation with duration
config <- animation_config(
  duration = 500
)

# Complex animation configuration
config <- animation_config(
  delay = 100,
  duration = 800,
  easing = "ease-in-out",
  direction = "alternate",
  fill = "forwards",
  iterations = 2
)

# Infinite animation
config <- animation_config(
  duration = 1000,
  easing = "linear",
  iterations = Inf
)

Generate G6 AntV Dagre layout configuration

Description

This function creates a configuration list for G6 AntV Dagre layout with all available options as parameters.

Usage

antv_dagre_layout(
  rankdir = c("TB", "BT", "LR", "RL"),
  align = c("UL", "UR", "DL", "DR"),
  nodesep = 50,
  nodesepFunc = NULL,
  ranksep = 100,
  ranksepFunc = NULL,
  ranker = c("network-simplex", "tight-tree", "longest-path"),
  nodeSize = NULL,
  controlPoints = FALSE,
  begin = NULL,
  sortByCombo = FALSE,
  edgeLabelSpace = TRUE,
  nodeOrder = NULL,
  radial = FALSE,
  focusNode = NULL,
  preset = NULL,
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV Dagre layout.

Examples

# Basic dagre layout
dagre_config <- antv_dagre_layout()

# Horizontal layout with custom spacing
dagre_config <- antv_dagre_layout(
  rankdir = "LR",
  align = "UL",
  nodesep = 80,
  ranksep = 150
)

# Radial layout with focus node
dagre_config <- antv_dagre_layout(
  radial = TRUE,
  focusNode = "node1",
  ranker = "tight-tree"
)

Configure Auto Adapt Label Behavior

Description

Creates a configuration object for the auto-adapt-label behavior in G6. This behavior automatically adjusts label positions to reduce overlapping and improve readability in the graph visualization.

Usage

auto_adapt_label(
  key = "auto-adapt-label",
  enable = TRUE,
  throttle = 100,
  padding = 0,
  sort = NULL,
  sortNode = list(type = "degree"),
  sortEdge = NULL,
  sortCombo = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the auto-adapt-label behavior.

Examples

# Basic configuration with defaults
config <- auto_adapt_label()

# Custom configuration with more padding and custom throttle
config <- auto_adapt_label(
  key = "my-label-adapter",
  throttle = 200,
  padding = 5
)


# Using a custom enable function
config <- auto_adapt_label(
  enable = JS("(e) => e.targetType === 'node'")
)

Create Auto-Fit Configuration for G6 Graphs

Description

Configures the auto-fit behavior for a G6 graph. Auto-fit automatically adjusts the view to fit all elements or centers them within the canvas.

Usage

auto_fit_config(
  type = c("view", "center"),
  when = c("overflow", "always"),
  direction = c("x", "y", "both"),
  duration = 1000,
  easing = c("ease-in-out", "ease", "ease-in", "ease-out", "linear", "cubic-bezier",
    "step-start", "step-end")
)

Arguments

Details

The auto-fit feature helps ensure that graph elements remain visible within the canvas. It can be configured to either fit all elements to view or center them, and can be triggered under different conditions.

Value

A list containing the auto-fit configuration that can be passed to g6_options().

Examples

# Basic auto-fit configuration with default settings
config <- auto_fit_config()

# Auto-fit with only centering (no scaling)
config <- auto_fit_config(type = "center")

# Auto-fit that always triggers when graph data changes
config <- auto_fit_config(when = "always")

# Auto-fit only in the x direction
config <- auto_fit_config(direction = "x")

# Auto-fit with a fast animation
config <- auto_fit_config(duration = 300, easing = "ease-out")

Configure Background Plugin for G6

Description

Creates a configuration object for the background plugin in G6. This plugin adds a customizable background to the graph canvas.

Usage

background(
  key = NULL,
  width = "100%",
  height = "100%",
  backgroundColor = NULL,
  backgroundImage = NULL,
  backgroundSize = "cover",
  backgroundPosition = NULL,
  backgroundRepeat = NULL,
  opacity = NULL,
  transition = "background 0.5s",
  zIndex = "-1",
  ...
)

Arguments

Value

A list with the configuration settings for the background plugin.

Examples

# Basic background color
bg <- background(backgroundColor = "#f0f0f0")

# Background with image
bg <- background(
  backgroundImage = "https://example.com/background.jpg",
  backgroundSize = "contain",
  backgroundRepeat = "no-repeat",
  backgroundPosition = "center"
)

# Semi-transparent background with transition
bg <- background(
  backgroundColor = "#000000",
  opacity = "0.3",
  transition = "all 1s ease-in-out"
)

Configure Brush Selection Interaction

Description

Creates a configuration object for brush selection interaction in graph visualizations. This function configures how elements are selected when using a brush selection tool.

Usage

brush_select(
  key = "brush-select",
  animation = FALSE,
  enable = JS("(e) => {\n      return true\n    }"),
  enableElements = "node",
  immediately = FALSE,
  mode = c("default", "union", "intersect", "diff"),
  onSelect = NULL,
  state = c("selected", "active", "inactive", "disabled", "highlight"),
  style = NULL,
  trigger = "shift",
  ...
)

Arguments

Value

A list with the configuration settings for the brush select behavior.

Examples

# Basic configuration
config <- brush_select()

# Custom configuration
config <- brush_select(
  animation = TRUE,
  enableElements = c("node", "edge"),
  mode = "union",
  state = "highlight",
  style = list(
    fill = "rgba(0, 0, 255, 0.1)",
    stroke = "blue",
    lineWidth = 2
  ),
  trigger = c("Shift")
)

Configure Bubble Sets Plugin for G6

Description

Creates a configuration object for the bubble-sets plugin in G6. This plugin creates bubble-like contours around groups of specified elements.

Usage

bubble_sets(
  members,
  key = "bubble-sets",
  avoidMembers = NULL,
  label = TRUE,
  labelPlacement = c("bottom", "left", "right", "top", "center"),
  labelBackground = FALSE,
  labelPadding = 0,
  labelCloseToPath = TRUE,
  labelAutoRotate = TRUE,
  labelOffsetX = 0,
  labelOffsetY = 0,
  labelMaxWidth = NULL,
  maxRoutingIterations = 100,
  maxMarchingIterations = 20,
  pixelGroup = 4,
  edgeR0 = NULL,
  edgeR1 = NULL,
  nodeR0 = NULL,
  nodeR1 = NULL,
  morphBuffer = NULL,
  threshold = NULL,
  memberInfluenceFactor = NULL,
  edgeInfluenceFactor = NULL,
  nonMemberInfluenceFactor = NULL,
  virtualEdges = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the bubble-sets plugin.

Examples

# Basic bubble set around specific nodes
bubble <- bubble_sets(
  members = c("node1", "node2", "node3"),
  label = TRUE
)

# More customized bubble set
bubble <- bubble_sets(
  key = "team-a",
  members = c("node1", "node2", "node3", "edge1", "edge2"),
  avoidMembers = c("node4", "node5"),
  labelPlacement = "top",
  labelBackground = TRUE,
  labelPadding = c(4, 2),
  maxRoutingIterations = 150
)

# Bubble set with advanced parameters
bubble <- bubble_sets(
  members = c("node1", "node2", "node3"),
  pixelGroup = 6,
  edgeR0 = 10,
  nodeR0 = 5,
  memberInfluenceFactor = 0.8,
  edgeInfluenceFactor = 0.5,
  nonMemberInfluenceFactor = 0.3,
  virtualEdges = TRUE
)

Create Canvas Configuration for G6 Graphs

Description

Configures the canvas settings for a G6 graph. The canvas is the rendering surface where the graph is drawn.

Usage

canvas_config(
  container = NULL,
  devicePixelRatio = NULL,
  width = NULL,
  height = NULL,
  cursor = NULL,
  background = NULL,
  renderer = NULL,
  enableMultiLayer = NULL
)

Arguments

Details

Canvas configuration controls how the graph is rendered, including its size, scaling, background, and rendering layer settings. This function provides a structured way to configure all canvas-related options.

Note that many of these settings (container, width, height, devicePixelRatio, background, cursor) can also be set directly in the main graph configuration, which will be automatically converted to canvas configuration items.

Value

A list containing the canvas configuration that can be passed to g6_options().

Examples

# Basic canvas configuration
config <- canvas_config(
  container = "#graph-container",
  width = 800,
  height = 600
)

# Canvas with multi-layer rendering enabled
config <- canvas_config(
  container = "#graph-container",
  width = 1000,
  height = 700,
  enableMultiLayer = TRUE,
  cursor = "grab"
)

Generate G6 AntV circular layout configuration

Description

This function creates a configuration list for G6 AntV circular layout with all available options as parameters.

Usage

circular_layout(
  angleRatio = 1,
  center = NULL,
  clockwise = TRUE,
  divisions = 1,
  nodeSize = 10,
  nodeSpacing = 10,
  ordering = NULL,
  radius = NULL,
  startAngle = 0,
  endAngle = 2 * pi,
  startRadius = NULL,
  endRadius = NULL,
  width = NULL,
  height = NULL,
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV circular layout.

Examples

circular_config <- circular_layout(
  radius = 200,
  startAngle = 0,
  endAngle = pi,
  clockwise = FALSE
)

Configure Click Select Behavior

Description

Creates a configuration object for the click-select behavior in G6. This allows users to select graph elements by clicking.

Usage

click_select(
  key = "click-select",
  animation = TRUE,
  degree = 0,
  enable = TRUE,
  multiple = FALSE,
  state = c("selected", "active", "inactive", "disabled", "highlight"),
  neighborState = c("selected", "active", "inactive", "disabled", "highlight"),
  unselectedState = NULL,
  onClick = NULL,
  trigger = "shift",
  ...
)

Arguments

Value

A list with the configuration settings for the click select behavior.

Examples

# Basic configuration
config <- click_select()

# Custom configuration
config <- click_select(
  animation = FALSE,
  degree = 1,
  multiple = TRUE,
  state = "active",
  neighborState = "highlight",
  unselectedState = "inactive",
  trigger = c("Control")
)

Configure Collapse Expand Behavior

Description

Creates a configuration object for the collapse-expand behavior in G6. This allows users to collapse or expand nodes/combos with child elements.

Usage

collapse_expand(
  key = "collapse-expand",
  animation = TRUE,
  enable = TRUE,
  trigger = "dblclick",
  onCollapse = NULL,
  onExpand = NULL,
  align = TRUE,
  ...
)

Arguments

Value

A list with the configuration settings for the collapse-expand behavior.

Examples

# Basic configuration
config <- collapse_expand()

Create an AntV Combo Combined Layout

Description

Creates a combo combined layout configuration for G6 graphs. This layout algorithm combines different layout strategies for elements inside combos and the outermost layer, providing hierarchical organization of graph elements.

Usage

combo_combined_layout(
  center = NULL,
  comboPadding = 10,
  innerLayout = NULL,
  nodeSize = 10,
  outerLayout = NULL,
  spacing = NULL,
  treeKey = NULL,
  ...
)

Arguments

Details

The combo combined layout is particularly useful for graphs with hierarchical structures where you want different layout algorithms for different levels of the hierarchy. The inner layout handles elements within combos, while the outer layout manages the overall arrangement.

Value

A layout configuration object for use with G6 graphs.

See Also

antv_dagre_layout for dagre layout configuration

Examples

# Basic combo combined layout
layout <- combo_combined_layout()

# Custom configuration with specific center and padding
layout <- combo_combined_layout(
  comboPadding = 20,
  nodeSize = 15,
  spacing = 10
)

Create Combo Options Configuration for G6 Graphs

Description

Configures the general options for combos in a G6 graph. These settings control the type, style, state, palette, and animation of combos.

Usage

combo_options(
  type = "circle",
  style = NULL,
  state = NULL,
  palette = NULL,
  animation = NULL
)

Arguments

Details

Combo options allow defining how combos (node groupings) appear and behave in a G6 graph. This includes selecting combo types, setting styles, configuring state-based appearances, defining color palettes, and specifying animation effects.

Value

A list containing combo options configuration that can be passed to g6_options().

Examples

# Basic combo options with default circle type
options <- combo_options()

# Rectangle combo with custom style
options <- combo_options(
  type = "rect",
  style = list(
    fill = "#F6F6F6",
    stroke = "#CCCCCC",
    lineWidth = 1
  )
)

Generate G6 AntV Compact Box layout configuration

Description

This function creates a configuration list for G6 AntV Compact Box layout with all available options as parameters. The Compact Box layout is designed for efficiently laying out trees and hierarchical structures.

Usage

compact_box_layout(
  direction = c("LR", "RL", "TB", "BT", "H", "V"),
  getSide = NULL,
  getId = NULL,
  getWidth = NULL,
  getHeight = NULL,
  getHGap = NULL,
  getVGap = NULL,
  radial = FALSE,
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV Compact Box layout.

Examples

# Basic compact box layout
box_config <- compact_box_layout()

# Vertical compact box layout
box_config <- compact_box_layout(
  direction = "TB"
)

# Radial layout
box_config <- compact_box_layout(
  radial = TRUE
)

Generate G6 AntV Concentric layout configuration

Description

This function creates a configuration list for G6 AntV Concentric layout with all available options as parameters. The Concentric layout places nodes in concentric circles based on a centrality measure.

Usage

concentric_layout(
  center = NULL,
  clockwise = FALSE,
  equidistant = FALSE,
  width = NULL,
  height = NULL,
  sortBy = "degree",
  maxLevelDiff = NULL,
  nodeSize = 30,
  nodeSpacing = 10,
  preventOverlap = FALSE,
  startAngle = 3/2 * pi,
  sweep = NULL,
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV Concentric layout

Examples

# Basic concentric layout
concentric_config <- concentric_layout()

# Custom concentric layout with degree-based sorting and overlap prevention
concentric_config <- concentric_layout(
  clockwise = TRUE,
  sortBy = "degree",
  preventOverlap = TRUE,
  nodeSize = 30,
  nodeSpacing = 20
)

# Custom concentric layout with specific center and dimensions
concentric_config <- concentric_layout(
  center = c(300, 300),
  width = 600,
  height = 600,
  equidistant = TRUE,
  startAngle = pi
)

Configure Context Menu Behavior

Description

Creates a configuration object for the context-menu behavior in G6. This allows users to display a context menu when right-clicking or clicking on graph elements.

Usage

context_menu(
  key = "contextmenu",
  className = "g6-contextmenu",
  trigger = "contextmenu",
  offset = c(4, 4),
  onClick = NULL,
  getItems = NULL,
  getContent = NULL,
  loadingContent = NULL,
  enable = JS("(e) => e.targetType === 'node'"),
  ...
)

Arguments

Value

A list with the configuration settings for the context menu plugin.

Examples

# Basic configuration
config <- context_menu()

# Custom configuration with JavaScript functions
config <- 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
  }")
)

Configure Create Edge Behavior

Description

Creates a configuration object for the create-edge behavior in G6. This allows users to create edges between nodes by clicking or dragging.

Usage

create_edge(
  key = "create-edge",
  trigger = "drag",
  enable = FALSE,
  onCreate = NULL,
  onFinish = NULL,
  style = NULL,
  notify = FALSE,
  ...
)

Arguments

Value

A list with the configuration settings for the create-edge behavior.

Note

create_edge, drag_element and drag_element_force are incompatible by default, as there triggers are the same. You can change the trigger to workaround this.

Examples

# Basic configuration
config <- create_edge()

Generate G6 D3 Force layout configuration

Description

This function creates a configuration list for G6 D3 Force layout with all available options as parameters.

Usage

d3_force_layout(
  link = list(distance = 100, strength = 2),
  collide = list(radius = 40),
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV D3 Force layout.

Examples

# Basic D3 force layout
d3_force_config <- d3_force_layout()

# Custom link distance and collision radius
d3_force_config <- d3_force_layout(
  link = list(
    distance = 150,
    strength = 0.5,
    iterations = 3
  ),
  collide = list(
    radius = 30,
    strength = 0.8
  )
)

Example DAG graph

Description

The graph is a directed acyclic graph

Usage

data(dag)

Format

A list with 2 data frames:

nodes

data frame with 12 rows for the nodes.

edges

data frame with 12 rows for the edges.

combo

data frame with 3 rows for the combos.

Source

https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json

Generate G6 AntV Dagre layout configuration

Description

This function creates a configuration list for G6 AntV Dagre layout with all available options as parameters. The Dagre layout is designed for directed graphs, creating hierarchical layouts with nodes arranged in layers.

Usage

dagre_layout(
  rankdir = c("TB", "BT", "LR", "RL"),
  align = c("UL", "UR", "DL", "DR"),
  nodesep = 50,
  ranksep = 100,
  ranker = c("network-simplex", "tight-tree", "longest-path"),
  nodeSize = NULL,
  controlPoints = FALSE,
  ...
)

Arguments

Value

A list containing the configuration for G6 AntV Dagre layout.

Examples

# Basic dagre layout
dagre_config <- dagre_layout()

# Custom dagre layout with horizontal flow
dagre_config <- dagre_layout(
  rankdir = "LR",
  nodesep = 80,
  ranksep = 150,
  ranker = "tight-tree"
)

# Custom dagre layout with specific node size
dagre_config <- dagre_layout(
  nodeSize = 40,
  controlPoints = TRUE
)

Generate G6 Dendrogram layout configuration

Description

This function creates a configuration list for G6 Dendrogram layout with all available options as parameters.

Usage

dendrogram_layout(
  direction = c("LR", "RL", "TB", "BT", "H", "V"),
  nodeSep = 20,
  rankSep = 200,
  radial = FALSE,
  ...
)

Arguments

Value

A list containing the configuration for G6 dendrogram layout.

Configure Drag Canvas Behavior

Description

Creates a configuration object for the drag-canvas behavior in G6. This allows users to drag the canvas to pan the view.

Usage

drag_canvas(
  key = "drag-canvas",
  enable = NULL,
  animation = NULL,
  direction = c("both", "x", "y"),
  range = NULL,
  sensitivity = 10,
  trigger = NULL,
  onFinish = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the drag-canvas behavior.

Examples

# Basic configuration
config <- drag_canvas()

# Custom configuration
config <- drag_canvas(
  enable = TRUE,
  direction = "x",
  range = c(-100, 100),
  sensitivity = 5,
  trigger = list(
   up = "ArrowUp",
   down = "ArrowDown",
   left = "ArrowLeft",
   right = "ArrowRight"
  )
)

Configure Drag Element Behavior

Description

Creates a configuration object for the drag-element behavior in G6. This allows users to drag nodes and combos in the graph.

Usage

drag_element(
  key = "drag-element",
  enable = TRUE,
  animation = TRUE,
  state = "selected",
  dropEffect = c("move", "link", "none"),
  hideEdge = c("none", "out", "in", "both", "all"),
  shadow = FALSE,
  cursor = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the drag-element behavior.

Examples

# Basic configuration
config <- drag_element()

# Custom configuration
config <- drag_element(
  key = "my-drag-behavior",
  animation = FALSE,
  dropEffect = "link",
  hideEdge = "both",
  shadow = TRUE,
  cursor = list(
    default = "default",
    grab = "grab",
    grabbing = "grabbing"
  ),
  enable = JS(
   "(e) => {
     return e.targetType === 'node' || e.targetType === 'combo';
   }"
  )
)

Configure Drag Element Force Behavior

Description

Creates a configuration object for the drag-element-force behavior in G6. This allows users to drag nodes and combos with force-directed layout interactions.

Usage

drag_element_force(
  key = "drag-element-force",
  fixed = FALSE,
  enable = NULL,
  state = "selected",
  hideEdge = c("none", "out", "in", "both", "all"),
  cursor = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the drag-element-force behavior.

Examples

# Basic configuration
config <- drag_element_force()

# Custom configuration with JavaScript arrow function and custom key
config <- drag_element_force(
  key = "my-custom-drag-force",
  fixed = TRUE,
  enable = JS("(event) => { return event.targetType === 'node'; }"),
  hideEdge = "both",
  cursor = list(
    default = "default",
    grab = "grab",
    grabbing = "grabbing"
  )
)

Configure Edge Bundling Plugin

Description

Creates a configuration object for the edge-bundling plugin in G6. This plugin automatically bundles similar edges together to reduce visual clutter.

Usage

edge_bundling(
  key = "edge-bundling",
  bundleThreshold = 0.6,
  cycles = 6,
  divisions = 1,
  divRate = 2,
  iterations = 90,
  iterRate = 2/3,
  K = 0.1,
  lambda = 0.1,
  ...
)

Arguments

Value

A list with the configuration settings for the edge-bundling plugin.

Examples

# Basic configuration
config <- edge_bundling()

# Custom configuration
config <- edge_bundling(
  key = "my-edge-bundling",
  bundleThreshold = 0.8,
  cycles = 8,
  K = 0.2
)

Configure Edge Filter Lens Plugin

Description

Creates a configuration object for the edge-filter-lens plugin in G6. This plugin creates a lens that filters and displays edges within a specific area.

Usage

edge_filter_lens(
  key = "edge-filter-lens",
  trigger = c("pointermove", "click", "drag"),
  r = 60,
  maxR = NULL,
  minR = 0,
  scaleRBy = "wheel",
  nodeType = c("both", "source", "target", "either"),
  filter = NULL,
  style = NULL,
  nodeStyle = list(label = FALSE),
  edgeStyle = list(label = TRUE),
  preventDefault = TRUE,
  ...
)

Arguments

Value

A list with the configuration settings for the edge-filter-lens plugin.

Examples

# Basic configuration
config <- edge_filter_lens()

# Custom configuration
config <- edge_filter_lens(
  key = "my-edge-lens",
  trigger = "drag",
  r = 100,
  nodeType = "either",
  style = list(
    fill = "rgba(200, 200, 200, 0.3)",
    stroke = "#999",
    lineWidth = 2
  ),
  filter = JS("(id, type) => {
    // Only display edges connected to specific nodes
    if (type === 'edge') {
      const edge = graph.getEdgeData(id);
      return edge.source === 'node1' || edge.target === 'node1';
    }
    return true;
  }")
)

Create Edge Options Configuration for G6 Graphs

Description

Configures the general options for edges in a G6 graph. These settings control the type, style, state, palette, and animation of edges.

Usage

edge_options(
  type = c("line", "polyline", "arc", "quadratic", "cubic", "cubic-vertical",
    "cubic-horizontal", "loop"),
  style = edge_style_options(),
  state = NULL,
  palette = NULL,
  animation = NULL
)

Arguments

Details

Edge options allow defining how edges appear and behave in a G6 graph. This includes selecting edge types, setting styles, configuring state-based appearances, defining color palettes, and specifying animation effects.

Value

A list containing edge options configuration that can be passed to g6_options().

Examples

# Basic edge options with default line type
options <- edge_options()

# Curved edge with custom style
options <- edge_options(
  type = "cubic",
  style = edge_style_options(
    stroke = "#1783FF",
    lineWidth = 2,
    endArrow = TRUE
  )
)

Create Edge Style Options for G6 Graphs

Description

Configures the styling options for edges in a G6 graph. These settings control the appearance and interaction behavior of edges.

Usage

edge_style_options(
  class = NULL,
  cursor = valid_cursors,
  fill = NULL,
  fillRule = c("nonzero", "evenodd"),
  filter = NULL,
  increasedLineWidthForHitTesting = NULL,
  isBillboard = TRUE,
  lineDash = 0,
  lineDashOffset = 0,
  lineWidth = 1,
  opacity = 1,
  pointerEvents = NULL,
  shadowBlur = NULL,
  shadowColor = NULL,
  shadowOffsetX = NULL,
  shadowOffsetY = NULL,
  shadowType = NULL,
  sourcePort = NULL,
  stroke = "#000",
  strokeOpacity = 1,
  targetPort = NULL,
  transform = NULL,
  transformOrigin = NULL,
  visibility = c("visible", "hidden"),
  zIndex = -10000,
  ...
)

Arguments

Details

Edge style options allow fine-grained control over how edges are rendered and behave in a G6 graph. This includes colors, widths, line styles, shadows, visibility, and interaction properties.

Value

A list containing edge style options that can be passed to edge_options().

Configure Fish Eye Plugin

Description

Creates a configuration object for the fisheye plugin in G6. This plugin creates a fisheye lens effect that magnifies elements within a specific area.

Usage

fish_eye(
  key = "fish-eye",
  trigger = c("pointermove", "click", "drag"),
  r = 120,
  maxR = NULL,
  minR = 0,
  d = 1.5,
  maxD = 5,
  minD = 0,
  scaleRBy = NULL,
  scaleDBy = NULL,
  showDPercent = TRUE,
  style = NULL,
  nodeStyle = list(label = TRUE),
  preventDefault = TRUE,
  ...
)

Arguments

Value

A list with the configuration settings for the fisheye plugin.

Examples

# Basic configuration
config <- fish_eye()

# Custom configuration
config <- fish_eye(
  key = "my-fisheye",
  trigger = "drag",
  r = 200,
  d = 2.5,
  scaleRBy = "wheel",
  scaleDBy = "drag",
  style = list(
    stroke = "#1890ff",
    fill = "rgba(24, 144, 255, 0.1)",
    lineWidth = 2
  ),
  nodeStyle = JS("(datum) => {
    return {
      label: true,
      labelCfg: {
        style: {
          fill: '#003a8c',
          fontSize: 14
        }
      }
    };
  }")
)

Configure Fix Element Size Behavior

Description

Creates a configuration object for the fix-element-size behavior in G6. This allows maintaining fixed visual sizes for elements during zoom operations.

Usage

fix_element_size(
  key = "fix-element-size",
  enable = TRUE,
  reset = FALSE,
  state = "",
  node = NULL,
  nodeFilter = JS("() => true"),
  edge = list(list(shape = "key", fields = c("lineWidth")), list(shape = "halo", fields =
    c("lineWidth")), list(shape = "label", fields = c("fontSize"))),
  edgeFilter = JS("() => true"),
  combo = NULL,
  comboFilter = JS("() => true"),
  ...
)

Arguments

Value

A list with the configuration settings for the fix-element-size behavior.

Examples

# Basic configuration
config <- fix_element_size()

# Custom configuration with filters and specific shape configurations
config <- fix_element_size(
  key = "my-fix-size-behavior",
  reset = TRUE,
  state = "active",
  node = list(
    list(shape = "circle", fields = c("r", "lineWidth")),
    list(shape = "label", fields = c("fontSize"))
  ),
  nodeFilter = JS("(node) => node.type === 'important'"),
  edge = list(shape = "line", fields = c("lineWidth", "lineDash")),
  edgeFilter = JS("(edge) => edge.weight > 5")
)

Configure Focus Element Behavior

Description

Creates a configuration object for the focus-element behavior in G6. This behavior allows focusing on specific elements by automatically adjusting the viewport.

Usage

focus_element(
  key = "focus-element",
  animation = list(duration = 500, easing = "ease-in"),
  enable = TRUE,
  ...
)

Arguments

Value

A list with the configuration settings for the focus-element behavior.

Examples

# Basic configuration
config <- focus_element()

# Custom configuration
config <- focus_element(
  key = "my-focus-behavior",
  animation = list(duration = 1000, easing = "ease-out"),
  enable = JS("(event) => event.targetType === 'node'")
)

Generate G6 Force Atlas2 layout configuration

Description

This function creates a configuration list for G6 Force Atlas2 layout with all available options as parameters.

Usage

force_atlas2_layout(
  barnesHut = NULL,
  dissuadeHubs = FALSE,
  height = NULL,
  kg = 1,
  kr = 5,
  ks = 0.1,
  ksmax = 10,
  mode = "normal",
  nodeSize = NULL,
  preventOverlap = FALSE,
  prune = NULL,
  tao = 0.1,
  width = NULL,
  center = NULL,
  ...
)

Arguments

Value

A list containing the configuration for G6 force atlas2 layout.

Examples

if (interactive()) {
  g6(lesmis$nodes, lesmis$edges) |>
    g6_layout(force_atlas2_layout(
      kr = 20,
      preventOverlap = TRUE,
      center = c(250, 250))) |>
    g6_options(autoResize = TRUE) |>
    g6_behaviors(
      "zoom-canvas",
      drag_element()
    )
}

Generate G6 Fruchterman layout configuration

Description

This function creates a configuration list for G6 Fruchterman layout with all available options as parameters.

Usage

fruchterman_layout(height = NULL, width = NULL, gravity = 10, speed = 5, ...)

Arguments

Value

A list containing the configuration for G6 fruchterman layout.

Examples

if (interactive()) {
  g6(lesmis$nodes, lesmis$edges) |>
   g6_layout(fruchterman_layout(
     gravity = 5,
     speed = 5
   )) |>
   g6_behaviors(
     "zoom-canvas",
     drag_element()
   )
}

Configure Fullscreen Plugin

Description

Creates a configuration object for the fullscreen plugin in G6. This plugin enables fullscreen mode for the graph.

Usage

fullscreen(
  key = "fullscreen",
  autoFit = TRUE,
  trigger = NULL,
  onEnter = NULL,
  onExit = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the fullscreen plugin.

Examples

# Basic configuration
config <- fullscreen()

# Custom configuration
config <- fullscreen(
  key = "my-fullscreen",
  autoFit = TRUE,
  trigger = list(
    request = "F",
    exit = "Esc"
  ),
  onEnter = JS("() => {
    console.log('Entered fullscreen mode');
  }"),
  onExit = JS("() => {
    console.log('Exited fullscreen mode');
  }")
)

Create a G6 Graph Visualization

Description

Creates an interactive graph visualization using the G6 graph visualization library. This function is the main entry point for creating G6 graph visualizations in R.

Usage

g6(
  nodes = NULL,
  edges = NULL,
  combos = NULL,
  jsonUrl = NULL,
  iconsUrl = "//at.alicdn.com/t/font_2678727_za4qjydwkkh.js",
  width = "100%",
  height = NULL,
  elementId = NULL
)

Arguments

Details

The g6 function creates a G6 graph as an htmlwidget that can be used in R Markdown, Shiny applications, or rendered to HTML. It takes graph data in the form of nodes, edges, and optional combo groupings, along with various configuration options for customizing the appearance and behavior of the graph.

Nodes

The nodes parameter should be a data frame or list of nodes with at least an id field for each node. Additional fields can include:

• id (required): Unique identifier for the node. Must be a character.

• type: Node type (e.g., "circle", "rect", "diamond").

• data: Custom data associated with the node.

• style: List of style attributes (color, size, etc.).

• states: String. Initial states for the node, such as selected, active, hover, etc.

• combo: ID of the combo this node belongs to.

Edges

The edges parameter should be a data frame or list of edges with at least source and target fields identifying the connected nodes. Additional fields can include:

• source (required): ID of the source node. Must be a character.

• target (required): ID of the target node. Must be a character.

• id: Unique identifier for the edge.

• type: Edge type (e.g., "line", "cubic", "arc").

• data: Custom data associated with the edge.

• style: List of style attributes (color, width, etc.).

• states: String. Initial states for the edge.

Combos

The combos parameter is used for grouping nodes and can be a data frame or list with combo definitions. Fields include:

• id (required): Unique identifier for the combo. Must be a character.

• type: String: Combo type. It can be the type of built-in Combo, or the custom Combo.

• data: Custom data associated with the combo.

• style: List of style attributes.

• states: String. Initial states for the combo.

• combo: String. Parent combo ID. If there is no parent combo, it is null.

Nodes are assigned to combos by setting their combo field to the ID of the combo.

Value

An htmlwidget object that can be printed, included in R Markdown documents, or used in Shiny applications. This widget contains the graph data and configuration necessary to render the G6 graph visualization.

Examples

# Create a simple graph with two nodes and one edge
nodes <- data.frame(
  id = c("node1", "node2")
)

edges <- data.frame(
  source = "node1",
  target = "node2"
)

g6(nodes = nodes, edges = edges)

Shiny bindings for g6

Description

Output and render functions for using g6 within Shiny applications and interactive Rmd documents.

Usage

g6Output(outputId, width = "100%", height = "400px")

g6_output(outputId, width = "100%", height = "400px")

renderG6(expr, env = parent.frame(), quoted = FALSE)

render_g6(expr, env = parent.frame(), quoted = FALSE)

Arguments

Value

g6Output and g6_output return a Shiny output function that can be used in the UI part of a Shiny app. renderG6 and render_g6 return a Shiny render function that can be used in the server part of a Shiny app to render a g6 element.

Add nodes/edges/combos to a g6 graph via proxy

Description

This function adds one or more nodes/edges/combos to an existing g6 graph instance using a proxy object. This allows updating the graph without completely re-rendering it.

Usage

g6_add_nodes(graph, nodes)

g6_add_edges(graph, edges)

g6_add_combos(graph, combos)

g6_add_data(graph, data)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

If a node with the same ID already exists, it will not be added again. See https://g6.antv.antgroup.com/en/api/data#graphaddnodedata, https://g6.antv.antgroup.com/en/api/data#graphaddedgedata and https://g6.antv.antgroup.com/en/api/data#graphaddcombodata for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy, g6_remove_nodes

Add a plugin to a g6 graph via proxy

Description

This function adds one or more plugins to an existing g6 graph instance using a proxy object within a Shiny application.

Usage

g6_add_plugin(graph, ...)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

G6 plugins extend the functionality of the graph visualization with features like minimaps, toolbar controls, contextual menus, and more. This function allows adding these plugins dynamically after the graph has been initialized.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy, g6_update_plugin

Create G6 Graph Behaviors Configuration

Description

Configures interaction behaviors for a G6 graph visualization. This function collects and combines multiple behavior configurations into a list that can be passed to graph initialization functions.

Usage

g6_behaviors(graph, ...)

Arguments

Value

A list of behavior configuration objects that can be passed to G6 graph initialization

Note

You can create custom behaviors from JavaScript and use them on the R side. See more at https://g6.antv.antgroup.com/en/manual/behavior/custom-behavior.

Examples

# Create a basic set of behaviors
behaviors <- g6_behaviors(
  g6(),
  drag_canvas(),
  zoom_canvas(),
  click_select()
)

# Create a more customized set of behaviors
behaviors <- g6_behaviors(
  g6(),
  drag_canvas(),
  zoom_canvas(sensitivity = 1.5),
  hover_activate(state = "highlight"),
  fix_element_size(
    node = list(
      list(shape = "circle", fields = c("r", "lineWidth"))
    )
  )
)

Resize the canvas of a g6 graph via proxy

Description

This function changes the size of the canvas of an existing g6 graph instance using a proxy object. This allows updating the graph dimensions without completely re-rendering it.

Usage

g6_canvas_resize(graph, width, height)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

See https://g6.antv.antgroup.com/en/api/canvas#graphsetsizewidth-height for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Collapse or expand a combo element in a g6 graph

Description

This function collapses/expands a specified combo (a group of nodes) in a g6 graph, hiding its member nodes and edges while maintaining the combo itself visible. This is useful for simplifying complex graphs with multiple hierarchical groups.

Usage

g6_collapse_combo(graph, id, options = NULL)

g6_expand_combo(graph, id, options = NULL)

Arguments

Details

When a combo is collapsed, its member nodes and edges are hidden from view while the combo itself remains visible, typically shown as a single node. This helps to reduce visual complexity in large graphs with hierarchical groupings.

Value

The modified g6 graph or g6_proxy object, allowing for method chaining.

References

https://g6.antv.antgroup.com/en/api/element#graphcollapseelementid-options, https://g6.antv.antgroup.com/en/api/element#graphexpandelementid-options

Center graph

Description

This function pans the graph to the center of the viewport

Usage

g6_fit_center(graph, animation = NULL)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

See https://g6.antv.antgroup.com/en/api/viewport#graphfitcenteranimation for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Focus on specific elements in a g6 graph via proxy

Description

This function focuses on one or more elements (nodes/edges) in an existing g6 graph instance using a proxy object. It highlights the specified elements and can optionally animate the view to focus on them.

Usage

g6_focus_elements(graph, ids, animation = NULL)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

See https://g6.antv.antgroup.com/en/api/element#graphfocuselementid-animation for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Get the state of nodes/edges/combos in a g6 graph via proxy

Description

This function gets the state of one or more nodes/edges/combos to an existing g6 graph instance using a proxy object.

Usage

g6_get_nodes(graph, nodes)

g6_get_edges(graph, edges)

g6_get_combos(graph, combos)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

If a node with the same ID already exists, it will not be added again. See https://g6.antv.antgroup.com/en/api/data#graphgetnodedata for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Examples

 if (interactive()) {
   library(shiny)
   library(bslib)

    ui <- page_fluid(
      verbatimTextOutput("res"),
      g6Output("graph")
    )

    server <- function(input, output, session) {
      output$graph <- renderG6({
        g6(
          nodes = data.frame(id = c("node1", "node2"))
        ) |>
          g6_options(animation = FALSE) |>
          g6_layout() |>
          g6_behaviors(click_select())
      })

      # Send query to JS
      observeEvent(req(input[["graph-initialized"]]), {
        g6_proxy("graph") |> g6_get_nodes(c("node1", "node2"))
      })

      # Recover query result inside input[["<GRAPH_ID>-<ELEMENT_ID>-state"]]
      output$res <- renderPrint({
        list(
          node1_state = input[["graph-node1-state"]],
          node2_state = input[["graph-node2-state"]]
        )
      })
    }
    shinyApp(ui, server)
 }

Hide/show elements in a g6 graph

Description

This function hides/shows specified elements (nodes, edges, or combos) in a g6 graph. Hidden elements are removed from view but remain in the graph data structure.

Usage

g6_hide_elements(graph, ids, animation = NULL)

g6_show_elements(graph, ids, animation = NULL)

Arguments

Details

When elements are hidden, they are removed from the visual display but still exist in the underlying data structure. This means they can be shown again later using g6_show_elements without having to recreate them.

Hidden elements will not participate in layout calculations, which may cause other elements to reposition. When elements are shown again, the graph may recalculate layout positions, which can cause other elements to reposition.

Value

The modified g6 graph or g6_proxy object, allowing for method chaining.

See Also

g6_show_elements

Create a G6 Graph from an igraph Object

Description

Converts an igraph graph object into the format required by the g6() function and creates an interactive G6 graph visualization. This is a convenience wrapper around g6() that allows you to work directly with igraph objects.

Usage

g6_igraph(
  graph,
  combos = NULL,
  width = "100%",
  height = NULL,
  elementId = NULL
)

Arguments

Details

This function extracts the node and edge data from an igraph object, converts them into the appropriate format for G6, and passes them to g6(). Node styling is derived from vertex attributes, and edge styling from edge attributes.

If the graph is directed, edges will automatically be rendered with arrows.

Value

An htmlwidget object that can be rendered in R Markdown, Shiny apps, or the R console.

See Also

g6() for more information about node, edge, and combo structure.

Examples

if (require(igraph)) {
  g <- igraph::make_ring(5)
  g6_igraph(g)
}

Set the layout algorithm for a g6 graph

Description

This function configures the layout algorithm used to position nodes in a g6 graph.

Usage

g6_layout(graph, layout = d3_force_layout())

Arguments

Details

G6 provides several layout algorithms, each suitable for different graph structures:

• force: Force-directed layout using physical simulation of forces.

• random: Random layout placing nodes randomly.

• circular: Arranges nodes on a circle.

• radial: Radial layout with nodes arranged outward from a central node.

• grid: Arranges nodes in a grid pattern.

• concentric: Concentric circles with important nodes in the center.

• dagre: Hierarchical layout for directed acyclic graphs.

• fruchterman: Force-directed layout based on the Fruchterman-Reingold algorithm.

• mds: Multidimensional scaling layout.

• comboForce: Force-directed layout specially designed for combo graphs.

Each layout algorithm has specific configuration options. See the G6 documentation for detailed information on each layout and its parameters: https://g6.antv.antgroup.com/en/manual/layout/overview.

Value

The modified g6 graph object with the specified layout, allowing for method chaining.

See Also

g6()

Configure Global Options for G6 Graph

Description

Sets up the global configuration options for a G6 graph including node, edge and combo styles, layout, canvas, animation, and interactive behavior settings.

Usage

g6_options(
  graph,
  node = NULL,
  edge = NULL,
  combo = NULL,
  autoFit = NULL,
  canvas = NULL,
  animation = TRUE,
  autoResize = FALSE,
  background = NULL,
  cursor = valid_cursors,
  devicePixelRatio = NULL,
  renderer = NULL,
  padding = NULL,
  rotation = 0,
  x = NULL,
  y = NULL,
  zoom = 1,
  zoomRange = c(0.01, 10),
  theme = "light",
  ...
)

Arguments

Details

The g6_options function provides a comprehensive configuration interface for G6 graphs. It allows you to control all aspects of graph rendering and behavior, from styling of individual elements to global visualization settings.

Value

A list containing all specified G6 graph configuration options.

Examples

# Basic usage with defaults
opts <- g6_options(g6())

# Customize node and edge styles
opts <- g6_options(
  g6(),
  node = node_options(
    type = "circle",
    style = node_style_options(
      fill = "#1783FF",
      stroke = "#0066CC"
    )
  ),
  edge = edge_options(
    type = "cubic",
    style = edge_style_options(
      stroke = "#999999",
      lineWidth = 1.5
    )
  )
)

# Configure graph with dark theme, auto-resize, and custom background
opts <- g6_options(
  g6(),
  theme = "dark",
  autoResize = TRUE,
  background = "#222222",
  padding = 20,
  zoom = 0.8,
  zoomRange = c(0.5, 2)
)

# Configure with custom animations
opts <- g6_options(
  g6(),
  animation = animation_config(
    duration = 500,
    easing = "easeCubic"
  ),
  autoFit = auto_fit_config(duration = 300, easing = "ease-out")
)

Create a List of G6 Plugins

Description

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.

Usage

g6_plugins(graph, ...)

Arguments

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

Data Exploration

• Fisheye (fisheye): Provides a focus + context exploration experience

• Edge Filter Lens (edge-filter-lens): Filters and displays edges within a specified area

• Edge Bundling (edge-bundling): Bundles edges with similar paths together to reduce visual clutter

Advanced Features

• History (history): Supports undo/redo operations

• Camera Setting (camera-setting): Configures camera parameters in a 3D scene

Value

A list of G6 plugin configurations that can be passed to a G6 graph.

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(
  g6(),
  minimap(),
  grid_line(),
  tooltips(
    getContent = JS("(e, items) => {
      return `<div>${items[0].id}</div>`;
    }")
  )
)

# Add a context menu and toolbar
plugins <- g6_plugins(
  g6(),
  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();
    }")
  )
)

Create a proxy object to modify an existing g6 graph instance

Description

This function creates a proxy object that can be used to update an existing g6 graph instance after it has been rendered in the UI. The proxy allows for server-side modifications of the graph without completely re-rendering it.

Usage

g6_proxy(id, session = shiny::getDefaultReactiveDomain())

Arguments

Value

A proxy object of class "g6_proxy" that can be used with g6 proxy methods such as g6_add_nodes(), g6_remove_nodes(), etc.

Remove nodes/edge/combos from a g6 graph via proxy

Description

This function removes one or more nodes/edges/combos from an existing g6 graph instance using a proxy object. This allows updating the graph without completely re-rendering it.

Usage

g6_remove_nodes(graph, ids)

g6_remove_edges(graph, ids)

g6_remove_combos(graph, ids)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

See https://g6.antv.antgroup.com/en/api/data#graphremovenodedata, https://g6.antv.antgroup.com/en/api/data#graphremoveedgedata and https://g6.antv.antgroup.com/en/api/data#graphremovecombodata for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

Note

When a node is removed, its connected edges are also removed.

See Also

g6_proxy

Set the state of nodes/edges/combos in a g6 graph via proxy

Description

This function sets the state of one or more nodes/edges/combos to an existing g6 graph instance using a proxy object. This allows updating the graph without completely re-rendering it. Valid states are "selected", "active", "inactive", "disabled", or "highlight".

Usage

g6_set_nodes(graph, nodes)

g6_set_edges(graph, edges)

g6_set_combos(graph, combos)

g6_set_data(graph, data)

Arguments

Details

g6_set_data allows to set all graph data at once (nodes, edges and combos).

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

If a node with the same ID already exists, it will not be added again. See https://g6.antv.antgroup.com/en/api/element#graphsetelementstateid-state-options for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Set options for a g6 graph via proxy

Description

This function allows updating various configuration options of an existing g6 graph instance using a proxy object within a Shiny application.

Usage

g6_set_options(graph, ...)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

The function allows updating various graph options dynamically without having to re-render the entire graph. This is useful for changing behavior, appearance, or interaction modes in response to user input.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Set the theme for a g6 graph via proxy

Description

This function sets the theme for an existing g6 graph instance

Usage

g6_set_theme(graph, theme)

Arguments

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy()

Update a behavior in a g6 graph via proxy

Description

This function allows updating the configuration of an existing behavior in a g6 graph instance using a proxy object within a Shiny application.

Usage

g6_update_behavior(graph, key, ...)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

Behaviors in G6 define how the graph responds to user interactions like dragging, zooming, clicking, etc. This function allows dynamically updating the configuration of these behaviors without having to reinitialize the graph.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy

Update nodes/edges/combos to a g6 graph via proxy

Description

This function updates one or more nodes/edges/combos to an existing g6 graph instance using a proxy object. This allows updating the graph without completely re-rendering it.

Usage

g6_update_nodes(graph, nodes)

g6_update_edges(graph, edges)

g6_update_combos(graph, combos)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

See https://g6.antv.antgroup.com/en/api/data#graphupdatenodedata, https://g6.antv.antgroup.com/en/api/data#graphupdateedgedata and https://g6.antv.antgroup.com/en/api/data#graphupdatecombodata for more details.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy, g6_remove_nodes

Update a plugin in a g6 graph via proxy

Description

This function allows updating the configuration of an existing plugin in a g6 graph instance using a proxy object within a Shiny application.

Usage

g6_update_plugin(graph, key, ...)

Arguments

Details

This function can only be used with a g6_proxy object within a Shiny application. It will not work with regular g6 objects outside of Shiny.

The function allows dynamically updating the configuration of an existing plugin without having to reinitialize it. This is useful for changing plugin behavior or appearance in response to user interactions.

Value

The g6_proxy object (invisibly), allowing for method chaining.

See Also

g6_proxy, g6_add_plugin

Configure Grid Line Plugin

Description

Creates a configuration object for the grid-line plugin in G6. This plugin adds a background grid to the graph canvas.

Usage

grid_line(
  key = "grid-line",
  border = TRUE,
  borderLineWidth = 1,
  borderStroke = "#eee",
  borderStyle = "solid",
  follow = FALSE,
  lineWidth = 1,
  size = 20,
  stroke = "#eee",
  ...
)

Arguments

Value

A list with the configuration settings for the grid-line plugin.

Examples

# Basic configuration
config <- grid_line()

# Custom configuration
config <- grid_line(
  key = "my-grid",
  border = TRUE,
  borderLineWidth = 2,
  borderStroke = "#ccc",
  borderStyle = "dashed",
  follow = list(
    translate = TRUE,
    zoom = FALSE
  ),
  lineWidth = 0.5,
  size = 30,
  stroke = "#e0e0e0"
)

Configure History Plugin

Description

Creates a configuration object for the history plugin in G6. This plugin enables undo/redo functionality for graph operations.

Usage

history(
  key = "history",
  afterAddCommand = NULL,
  beforeAddCommand = NULL,
  executeCommand = NULL,
  stackSize = 0,
  ...
)

Arguments

Value

A list with the configuration settings for the history plugin.

Examples

# Basic configuration
config <- history()

# Custom configuration
config <- history(
  key = "my-history",
  stackSize = 50,
  beforeAddCommand = JS("function(cmd, revert) {
    console.log('Before adding command:', cmd);
    // Only allow certain operations to be recorded
    return cmd.method !== 'update';
  }"),
  afterAddCommand = JS("function(cmd, revert) {
    console.log('Command added to ' + (revert ? 'undo' : 'redo') + ' stack');
  }"),
  executeCommand = JS("function(cmd) {
    console.log('Executing command:', cmd);
  }")
)

Configure Hover Activate Behavior

Description

Creates a configuration object for the hover-activate behavior in G6. This behavior activates elements when the mouse hovers over them.

Usage

hover_activate(
  key = "hover-activate",
  animation = TRUE,
  enable = TRUE,
  degree = 0,
  direction = c("both", "in", "out"),
  state = "active",
  inactiveState = NULL,
  onHover = NULL,
  onHoverEnd = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the hover-activate behavior.

Examples

# Basic configuration
config <- hover_activate()

# Custom configuration
config <- hover_activate(
  key = "my-hover-behavior",
  animation = FALSE,
  degree = 1,
  direction = "out",
  state = "highlight",
  inactiveState = "inactive",
  onHover = JS("(event) => { console.log('Hover on:', event.target.id); }")
)

Configure Hull Plugin

Description

Creates a configuration object for the hull plugin in G6. This plugin creates a hull (convex or concave) that surrounds specified graph elements.

Usage

hull(
  members,
  key = "hull",
  concavity = Inf,
  corner = c("rounded", "smooth", "sharp"),
  padding = 10,
  label = TRUE,
  labelText = NULL,
  labelPlacement = c("bottom", "left", "right", "top", "center"),
  labelBackground = FALSE,
  labelPadding = 0,
  labelCloseToPath = TRUE,
  labelAutoRotate = TRUE,
  labelOffsetX = 0,
  labelOffsetY = 0,
  labelMaxWidth = 0,
  ...
)

Arguments

Value

A list with the configuration settings for the hull plugin.

Examples

# Basic configuration
config <- hull(members = c("node1", "node2", "node3"))

# Custom configuration for a cluster
config <- hull(
  key = "cluster-hull",
  members = c("node1", "node2", "node3", "node4"),
  concavity = 0.8,
  corner = "smooth",
  padding = 15,
  label = TRUE,
  labelPlacement = "top",
  labelBackground = TRUE,
  labelPadding = c(4, 8),
  labelMaxWidth = 100
)

Configure Lasso Select Behavior

Description

Creates a configuration object for the lasso-select behavior in G6. This behavior allows selecting elements by drawing a lasso around them.

Usage

lasso_select(
  key = "lasso-select",
  animation = FALSE,
  enable = TRUE,
  enableElements = "node",
  immediately = FALSE,
  mode = c("default", "union", "intersect", "diff"),
  onSelect = NULL,
  state = "selected",
  style = NULL,
  trigger = c("shift"),
  ...
)

Arguments

Value

A list with the configuration settings for the lasso-select behavior.

Examples

# Basic configuration
config <- lasso_select()

# Custom configuration
config <- lasso_select(
  key = "my-lasso-select",
  animation = TRUE,
  enableElements = c("node", "combo"),
  mode = "union",
  state = "highlight",
  trigger = c("control"),
  style = list(
    stroke = "#1890FF",
    lineWidth = 2,
    fillOpacity = 0.1
  )
)

Configure Legend Plugin

Description

Creates a configuration object for the legend plugin in G6. This plugin adds a legend to the graph, allowing users to identify and interact with different categories of elements.

Usage

legend(
  key = "legend",
  trigger = c("hover", "click"),
  position = c("bottom", "top", "left", "right", "top-left", "top-right", "bottom-left",
    "bottom-right"),
  container = NULL,
  className = NULL,
  containerStyle = NULL,
  nodeField = NULL,
  edgeField = NULL,
  comboField = NULL,
  orientation = c("horizontal", "vertical"),
  layout = c("flex", "grid"),
  showTitle = FALSE,
  titleText = "",
  x = NULL,
  y = NULL,
  width = 240,
  height = 160,
  itemSpacing = 4,
  rowPadding = 10,
  colPadding = 10,
  itemMarkerSize = 16,
  itemLabelFontSize = 16,
  gridCol = NULL,
  gridRow = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the legend plugin.

Examples

# Basic configuration for node categories
config <- legend(
  nodeField = "category"
)

# Advanced configuration
config <- legend(
  key = "my-legend",
  position = "top-right",
  nodeField = "type",
  edgeField = "relation",
  orientation = "vertical",
  layout = "grid",
  showTitle = TRUE,
  titleText = "Graph Elements",
  width = 300,
  height = 200,
  gridCol = 2,
  containerStyle = list(
    background = "#f9f9f9",
    border = "1px solid #ddd",
    borderRadius = "4px",
    padding = "8px"
  )
)

# Using a function for classification
config <- legend(
  nodeField = JS("(item) => {
    return item.data.importance > 0.5 ? 'Important' : 'Regular';
  }")
)

Character network from "Les miserables" novel

Description

A dataset containing Les Misérables characters network, encoding interactions between characters of Victor Hugo's novel. Two characters are connected whenever they appear in the same chapter. This dataset was first created by Donald Knuth as part of the Stanford Graph Base. (https://people.sc.fsu.edu/~jburkardt/datasets/sgb/sgb.html). It contains 77 nodes corresponding to characters of the novel, and 254 edges.

Usage

data(lesmis)

Format

A list with 2 data frames:

nodes

data frame with 77 rows for the nodes. Contains node labels and x/y coordinates.

edges

data frame with 254 rows for the edges. Contains souyrce/target and the number of times the interaction happened.

Source

https://networks.skewed.de/net/lesmis

Configure Minimap Plugin

Description

Creates a configuration object for the minimap plugin in G6. This plugin adds a minimap/thumbnail view of the entire graph.

Usage

minimap(
  key = "minimap",
  className = NULL,
  container = NULL,
  containerStyle = NULL,
  delay = 128,
  filter = NULL,
  maskStyle = NULL,
  padding = 10,
  position = "right-bottom",
  renderer = NULL,
  shape = "key",
  size = c(240, 160),
  ...
)

Arguments

Value

A list with the configuration settings for the minimap plugin.

Examples

# Basic configuration
config <- minimap()

# Custom configuration
config <- minimap(
  key = "my-minimap",
  position = "left-top",
  size = c(200, 150),
  padding = 15,
  containerStyle = list(
    border = "1px solid #ddd",
    borderRadius = "4px",
    boxShadow = "0 0 8px rgba(0,0,0,0.1)"
  ),
  maskStyle = list(
    stroke = "#1890ff",
    strokeWidth = 2,
    fill = "rgba(24, 144, 255, 0.1)"
  )
)

# With custom filtering function
config <- minimap(
  filter = JS("(id, elementType) => {
    // Only show nodes and important edges in the minimap
    if (elementType === 'node') return true;
    if (elementType === 'edge') {
      // Assuming edges have an 'important' attribute
      const edge = graph.findById(id);
      return edge.getModel().important === true;
    }
    return false;
  }")
)

Create Node Options Configuration for G6 Graphs

Description

Configures the general options for nodes in a G6 graph. These settings control the type, style, state, palette, and animation of nodes.

Usage

node_options(
  type = c("circle", "rect", "ellipse", "diamond", "triangle", "star", "image",
    "modelRect"),
  style = node_style_options(),
  state = NULL,
  palette = NULL,
  animation = NULL
)

Arguments

Details

Node options allow defining how nodes appear and behave in a G6 graph. This includes selecting node types, setting styles, configuring state-based appearances, defining color palettes, and specifying animation effects.

Value

A list containing node options configuration that can be passed to g6_options().

Examples

# Basic node options with default circle type
options <- node_options()

# Rectangle node with custom style
options <- node_options(
  type = "rect",
  style = node_style_options(
    fill = "#E8F7FF",
    stroke = "#1783FF",
    lineWidth = 2
  )
)

Create Node Style Options for G6 Graphs

Description

Configures the styling options for nodes in a G6 graph. These settings control the appearance and interaction behavior of nodes. Used in node_options.

Usage

node_style_options(
  collapsed = FALSE,
  cursor = "default",
  fill = "#1783FF",
  fillOpacity = 1,
  increasedLineWidthForHitTesting = 0,
  lineCap = c("butt", "round", "square"),
  lineDash = NULL,
  lineDashOffset = NULL,
  lineJoin = c("miter", "round", "bevel"),
  lineWidth = 1,
  opacity = 1,
  shadowBlur = NULL,
  shadowColor = NULL,
  shadowOffsetX = NULL,
  shadowOffsetY = NULL,
  shadowType = c("outer", "inner"),
  size = 32,
  stroke = "#000",
  strokeOpacity = 1,
  transform = NULL,
  transformOrigin = NULL,
  visibility = c("visible", "hidden"),
  x = NULL,
  y = NULL,
  z = NULL,
  zIndex = NULL,
  ...
)

Arguments

Details

Node style options allow fine-grained control over how nodes are rendered and behave in a G6 graph. This includes colors, sizes, borders, shadows, visibility, positioning, and interaction states.

Value

A list containing node style options that can be passed to node_options().

Examples

# Basic node style with blue fill and red border
styles <- node_style_options(
  fill = "#1783FF",
  stroke = "#FF0000",
  lineWidth = 2
)

# Create a node with shadow effects
styles <- node_style_options(
  fill = "#FFFFFF",
  stroke = "#333333",
  lineWidth = 1,
  shadowBlur = 10,
  shadowColor = "rgba(0,0,0,0.3)",
  shadowOffsetX = 5,
  shadowOffsetY = 5
)

# Custom sized node with dashed border
styles <- node_style_options(
  size = c(100, 50),
  fill = "#E8F7FF",
  stroke = "#1783FF",
  lineDash = c(5, 5),
  opacity = 0.8
)

Configure Optimize Viewport Transform Behavior

Description

Creates a configuration object for the optimize-viewport-transform behavior in G6. This behavior improves performance during viewport transformations by temporarily hiding certain elements.

Usage

optimize_viewport_transform(
  key = "optimize-viewport-transform",
  enable = TRUE,
  debounce = 200,
  shapes = JS("(type) => type === 'node'"),
  ...
)

Arguments

Value

A list with the configuration settings for the optimize-viewport-transform behavior.

Examples

# Basic configuration
config <- optimize_viewport_transform()

# Custom configuration
config <- optimize_viewport_transform(
  key = "my-optimize-transform",
  debounce = 500,
  shapes = JS("(type) => type === 'node' || type === 'edge'")
)

# With conditional enabling
config <- optimize_viewport_transform(
  enable = JS("(event) => event.getCurrentTransform().zoom < 0.5")
)

Example pokemon data

Description

Pokemon evolution network to showcase combo features.

Usage

data(poke)

Format

A list with 3 nested lists:

nodes

list with 120 pokemon.

edges

list with 69 connections.

combo

list with 51 pokemon families. A family contains all evolutions of a pokemon.

Source

https://pokeapi.co/docs/v2

Example Network for radial layouts

Description

Example Network for radial layouts

Usage

data(radial)

Format

A list with 2 data frames:

nodes

data frame with 34 rows for the nodes.

edges

data frame with 58 rows for the edges.

Source

https://assets.antv.antgroup.com/g6/radial.json

Generate G6 Radial layout configuration

Description

This function creates a configuration list for G6 Radial layout with all available options as parameters.

Usage

radial_layout(
  center = NULL,
  focusNode = NULL,
  height = NULL,
  width = NULL,
  nodeSize = NULL,
  nodeSpacing = 10,
  linkDistance = 50,
  unitRadius = 100,
  maxIteration = 1000,
  maxPreventOverlapIteration = 200,
  preventOverlap = FALSE,
  sortBy = NULL,
  sortStrength = 10,
  strictRadial = TRUE,
  ...
)

Arguments

Value

A list containing the configuration for G6 radial layout.

Examples

if (interactive()) {
  g6(jsonUrl = "https://assets.antv.antgroup.com/g6/radial.json") |>
    g6_layout(
      radial_layout(
        unitRadius = 100,
        linkDistance = 200
      )
    ) |>
    g6_behaviors(
      "zoom-canvas",
      drag_element()
    )
}

Configure Scroll Canvas Behavior

Description

Creates a configuration object for the scroll-canvas behavior in G6. This behavior allows scrolling the canvas with mouse wheel or keyboard.

Usage

scroll_canvas(
  key = "scroll-canvas",
  enable = TRUE,
  direction = NULL,
  range = 1,
  sensitivity = 1,
  trigger = NULL,
  onFinish = NULL,
  preventDefault = TRUE,
  ...
)

Arguments

Value

A list with the configuration settings for the scroll-canvas behavior.

Examples

# Basic configuration
config <- scroll_canvas()

# Custom configuration
config <- scroll_canvas(
  key = "my-scroll-behavior",
  direction = "x",
  range = c(-2, 2),
  sensitivity = 1.5,
  preventDefault = FALSE
)

# With keyboard triggers and callback
config <- scroll_canvas(
  enable = JS("(event) => !event.altKey"),
  trigger = list(
    up = "w",
    down = "s",
    left = "a",
    right = "d"
  ),
  onFinish = JS("() => { console.log('Scrolling finished'); }")
)

Configure Snapline Plugin

Description

Creates a configuration object for the snapline plugin in G6. This plugin provides alignment guidelines when moving nodes.

Usage

snapline(
  key = "snapline",
  tolerance = 5,
  offset = 20,
  autoSnap = TRUE,
  shape = "key",
  verticalLineStyle = list(stroke = "#1783FF"),
  horizontalLineStyle = list(stroke = "#1783FF"),
  filter = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the snapline plugin.

Examples

# Basic configuration
config <- snapline()

# Custom configuration
config <- snapline(
  key = "my-snapline",
  tolerance = 8,
  offset = 30,
  verticalLineStyle = list(
    stroke = "#f00",
    strokeWidth = 1.5,
    lineDash = c(5, 2)
  ),
  horizontalLineStyle = list(
    stroke = "#00f",
    strokeWidth = 1.5,
    lineDash = c(5, 2)
  )
)

# With custom filter function
config <- snapline(
  filter = JS("(node) => {
    // Only allow regular nodes to participate in alignment
    // Exclude special nodes like 'start' or 'end'
    const model = node.getModel();
    return model.type !== 'start' && model.type !== 'end';
  }")
)

Configure Timebar Plugin

Description

Creates a configuration object for the timebar plugin in G6. This plugin adds a timeline or chart-based control for time-related data visualization.

Usage

timebar(
  data,
  key = "timebar",
  className = "g6-timebar",
  x = NULL,
  y = NULL,
  width = 450,
  height = 60,
  position = c("bottom", "top"),
  padding = 10,
  timebarType = c("time", "chart"),
  elementTypes = c("node", "edge", "combo"),
  mode = c("modify", "visibility"),
  values = NULL,
  loop = FALSE,
  getTime = NULL,
  labelFormatter = NULL,
  onChange = NULL,
  onReset = NULL,
  onSpeedChange = NULL,
  onPlay = NULL,
  onPause = NULL,
  onBackward = NULL,
  onForward = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the timebar plugin.

Examples

# Basic timebar with array of timestamps
config <- timebar(
  data = c(1609459200000, 1609545600000, 1609632000000)  # Jan 1-3, 2021 in milliseconds
)

# Chart-type timebar with time-value pairs
config <- timebar(
  data = list(
    list(time = 1609459200000, value = 10),
    list(time = 1609545600000, value = 25),
    list(time = 1609632000000, value = 15)
  ),
  timebarType = "chart",
  width = 600,
  height = 100,
  position = "top"
)

# With custom callbacks
config <- timebar(
  data = c(1609459200000, 1609545600000, 1609632000000),
  onChange = JS("(values) => {
    console.log('Time changed:', values);
  }"),
  onPlay = JS("() => {
    console.log('Playback started');
  }")
)

# With custom time getter function for elements
config <- timebar(
  data = c(1609459200000, 1609545600000, 1609632000000),
  getTime = JS("(datum) => {
    return datum.created_at; // Get time from created_at property
  }")
)

Configure Toolbar Plugin

Description

Creates a configuration object for the toolbar plugin in G6. This plugin adds a customizable toolbar with items for graph operations.

Usage

toolbar(
  getItems = NULL,
  key = "toolbar",
  className = NULL,
  position = c("top-left", "top", "top-right", "right", "bottom-right", "bottom",
    "bottom-left", "left"),
  style = NULL,
  onClick = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the toolbar plugin.

Examples

# Basic toolbar with zoom controls
config <- toolbar(
  position = "top-right",
  getItems = JS("() => [
    { id: 'zoom-in', value: 'zoom-in' },
    { id: 'zoom-out', value: 'zoom-out' },
    { id: 'undo', value: 'undo' },
    { id: 'redo', value: 'redo' },
    { id: 'auto-fit', value: 'fit' }
  ]"),
  onClick = JS("(value) => {
    // redo, undo need to be used with the history plugin
    const history = graph.getPluginInstance('history');
    switch (value) {
      case 'zoom-in':
        graph.zoomTo(1.1);
        break;
      case 'zoom-out':
        graph.zoomTo(0.9);
        break;
      case 'undo':
        history?.undo();
        break;
      case 'redo':
        history?.redo();
        break;
      case 'fit':
        graph.fitView();
        break;
      default:
        break;
    }
  }")
)

Configure Tooltip Plugin

Description

Creates a configuration object for the tooltip plugin in G6. This plugin displays tooltips when interacting with graph elements.

Usage

tooltips(
  key = "tooltip",
  position = c("top-right", "top", "bottom", "left", "right", "top-left", "bottom-left",
    "bottom-right"),
  enable = TRUE,
  getContent = NULL,
  onOpenChange = NULL,
  trigger = c("hover", "click"),
  container = NULL,
  offset = c(10, 10),
  enterable = FALSE,
  title = NULL,
  style = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the tooltip plugin.

Examples

# Basic tooltip
config <- tooltips()

# Tooltip with custom position and content
config <- tooltips(
  position = "bottom",
  getContent = JS("(event, items) => {
    let result = `<h4>Custom Content</h4>`;
    items.forEach((item) => {
      result += `<p>Type: ${item.data.description}</p>`;
    });
    return result;
  }")
)

# Click-triggered tooltip with custom style
config <- tooltips(
  trigger = "click",
  position = "bottom-left",
  offset = c(15, 20),
  style = list(
    ".tooltip" = list(
      backgroundColor = "#fff",
      border = "1px solid #ccc",
      borderRadius = "4px",
      boxShadow = "0 2px 6px rgba(0,0,0,0.1)",
      padding = "10px",
      maxWidth = "300px"
    )
  )
)

# Conditional tooltip based on node type
config <- tooltips(
  enable = JS("(event, items) => {
    // Only show tooltip for nodes with type 'important'
    const item = items[0];
    return item.type === 'important';
  }"),
  enterable = TRUE,
  onOpenChange = JS("(open) => {
    console.log('Tooltip visibility changed:', open);
  }")
)

Example tree graph

Description

The graph contains a classification of algorithm categories

Usage

data(tree)

Format

A list with 2 data frames:

nodes

data frame with 31 rows for the nodes.

edges

data frame with 30 rows for the edges.

Source

https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json

Configure Watermark Plugin

Description

Creates a configuration object for the watermark plugin in G6. This plugin adds a watermark to the graph canvas.

Usage

watermark(
  key = "watermark",
  width = 200,
  height = 100,
  opacity = 0.2,
  rotate = pi/12,
  imageURL = NULL,
  text = NULL,
  textFill = "#000",
  textFontSize = 16,
  textFontFamily = NULL,
  textFontWeight = NULL,
  textFontVariant = NULL,
  textAlign = c("center", "end", "left", "right", "start"),
  textBaseline = c("alphabetic", "bottom", "hanging", "ideographic", "middle", "top"),
  backgroundRepeat = "repeat",
  backgroundAttachment = NULL,
  backgroundBlendMode = NULL,
  backgroundClip = NULL,
  backgroundColor = NULL,
  backgroundImage = NULL,
  backgroundOrigin = NULL,
  backgroundPosition = NULL,
  backgroundPositionX = NULL,
  backgroundPositionY = NULL,
  backgroundSize = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the watermark plugin.

Examples

# Basic text watermark
config <- watermark(
  text = "G6 Graph",
  opacity = 0.1
)

# Image watermark
config <- watermark(
  imageURL = "https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg",
  width = 150,
  height = 75,
  opacity = 0.15,
  rotate = 0
)

# Customized text watermark
config <- watermark(
  text = "CONFIDENTIAL",
  textFill = "#ff0000",
  textFontSize = 24,
  textFontWeight = "bold",
  opacity = 0.08,
  rotate = pi/6,
  backgroundRepeat = "repeat-x"
)

# Watermark with background styling
config <- watermark(
  text = "Draft Document",
  textFill = "#333",
  backgroundColor = "#f9f9f9",
  backgroundClip = "content-box",
  backgroundSize = "cover"
)

Configure Zoom Canvas Behavior

Description

Creates a configuration object for the zoom-canvas behavior in G6. This behavior allows zooming the canvas with mouse wheel or keyboard shortcuts.

Usage

zoom_canvas(
  key = "zoom-canvas",
  animation = list(duration = 200),
  enable = TRUE,
  origin = NULL,
  onFinish = NULL,
  preventDefault = TRUE,
  sensitivity = 1,
  trigger = NULL,
  ...
)

Arguments

Value

A list with the configuration settings for the zoom-canvas behavior.

Examples

# Basic configuration
config <- zoom_canvas()

# Custom configuration
config <- zoom_canvas(
  key = "my-zoom-behavior",
  animation = list(duration = 300, easing = "ease-in-out"),
  origin = list(x = 0, y = 0),
  sensitivity = 1.5,
  preventDefault = FALSE
)

# With keyboard triggers and callback
config <- zoom_canvas(
  enable = JS("(event) => !event.altKey"),
  trigger = list(
    zoomIn = "+",
    zoomOut = "-",
    reset = "0"
  ),
  onFinish = JS("() => { console.log('Zooming finished'); }")
)