Behaviors

Introduction

Behaviors are actions that can be applied to the graph, such as zooming, panning, or selecting nodes. They can be added to the graph using the g6_behaviors() function. There are 2 ways to add behaviors to the graph. Either calling behaviors name as a string, or passing behaviors functions. The latter is more convenient to have more control over the specific options:

# Defaults
g6() |>
g6_behaviors("drag-canvas", "zoom-canvas")

# Fine tune parameters
g6() |>
  g6_behaviors(
    drag_canvas(
      key = "drag-canvas", 
      enable = TRUE,
      animation = NULL, 
      direction = c("both", "x", "y"),
      range = Inf,
      sensitivity = 10, 
      trigger = NULL,
      onFinish = NULL,
      ... # extra options
    ),
    create_edge(
      key = "create-edge",
      trigger = "drag",
      enable = FALSE, 
      onCreate = NULL,
      onFinish = NULL,
      style = NULL,
      notify = FALSE
    )
  )

Brush Select

Enables rectangular brush selection for selecting multiple elements at once. By default, the selection is made by clicking on shift and draging the mouse over the canvas.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" brush-select ")

Click Select

Allows selection of elements through mouse clicks. You can also select multiple elements by clicking on them while holding the shift key and enabling the option multiple = TRUE.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" click-select ")

Drag Canvas

Allows dragging the entire canvas to pan the view. May be incompatible with other behaviors such as create-edge depending on the trigger key.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" drag-canvas ")

Drag Element

Enables dragging individual elements to reposition them. May be incompatible with other behaviors such as create-edge depending on the trigger key.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" drag-element ")

Focus Element

Provides focusing capabilities to highlight specific elements. Click on a given element and see the canvas focusing on it.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" focus-element ")

Hover Activate

Activates interactive features when hovering over elements.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" hover-activate ")

Lasso Select

Enables free-form lasso selection for selecting multiple elements. By default, the selection is made by clicking on shift and draging the mouse over the canvas.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" lasso-select ")

Scroll Canvas

Enables scrolling to navigate through large graphs.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" scroll-canvas ")

Zoom Canvas

Provides zooming functionality for the canvas view.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    nodes = list(
      style = list(
        labelText = JS(
          "(d) => {
            return d.id
          }"
        )
      )
    )
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(" zoom-canvas ")

Auto adapt label

Automatically adapts label positioning to avoid overlaps and improve readability. This adjusts the label position based on the node’s size and position, ensuring that labels are not overlapping with other elements. It works well with zoom-canvas and scroll-canvas behaviors.

g6(nodes) |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(
    "auto-adapt-label",
    "zoom-canvas",
    "scroll-canvas"
  )

Fix element size

Maintains fixed element sizes during transformations such as zooming or panning. This is useful for ensuring that elements remain visually consistent regardless of the zoom level or canvas position.

g6(nodes) |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(
    "fix-element-size",
    "zoom-canvas",
    "scroll-canvas"
  )

Optimize viewport transform

Optimizes viewport transformations for better performance. This works well if the graph has many nodes and edges and if the hardware has limited resources. Edges are hidden when zooming in and out.

g6(jsonUrl = "https://assets.antv.antgroup.com/g6/5000.json") |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(
    "optimize-viewport-transform",
    "zoom-canvas",
    "scroll-canvas"
  )

Create edge

It enables interactive creation of new edges between nodes. You can drag from one node to another to create an edge and also change the trigger if you want to press another key to start the edge creation. Not that this may be incompatible with other behaviors such as drag-canvas. By default, the create-edge behavior is disabled, so you need to enable it explicitly. This is to avoid accidental edge creation when dragging nodes or panning the canvas. In practice, you can use it it in combination with the contextmenu() plugin which allows you to right-click on a node to create an edge.

Manual activation

g6(nodes) |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(create_edge(enable = TRUE))

g6(nodes) |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(create_edge()) |>
  g6_plugins(context_menu())

Collapse and expand

This provides functionality to collapse and expand graph structures. This works in a combo context when you double click (default) on the enclosing combo.

nodes$combo <- rep(1, nrow(nodes))
g6(nodes, combos = data.frame(id = 1)) |>
  g6_options(
    animation = FALSE,
    node = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors("collapse-expand")

Drag element force

Combines element dragging with force simulation for dynamic positioning.

nodes <- data.frame(id = letters[1:5])

g6(nodes) |>
  g6_options(
    animation = FALSE,
    nodes = nodes_options
  ) |>
  g6_layout(d3_force_layout()) |>
  g6_behaviors(drag_element_force(fixed = TRUE))

Dynamically interact with behaviors

Add

TBD?

Update

To update behavior from the server of a Shiny app, you can use the g6_update_behavior() function. This function allows you to modify the behaviors of an existing G6 graph.