Skip to contents

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
    )
  )

Auto Adapt Label Behavior

Automatically adapts label positioning to avoid overlaps and improve readability.

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(" auto-adapt-label ")

Brush Select Behavior

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 Behavior

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 ")

Collapse Expand Behavior

Provides functionality to collapse and expand graph structures. This works in a combo context.

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(" collapse-expand ")

Create Edge Behavior

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.

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(" create-edge ")

Drag Canvas Behavior

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 Behavior

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 ")

Drag Element Force Behavior

Combines element dragging with force simulation for dynamic positioning.

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-force ")

Fix Element Size Behavior

Maintains fixed element sizes during transformations.

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(" fix-element-size ")

Focus Element Behavior

Provides focusing capabilities to highlight specific 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(" focus-element ")

Hover Activate Behavior

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 Behavior

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 ")

Optimize Viewport Transform Behavior

Optimizes viewport transformations for better performance.

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(" optimize-viewport-transform ")

Scroll Canvas Behavior

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 Behavior

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 ")

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.