Introduction
Combos are a way to group nodes in a graph. They can be used to represent hierarchical structures or to visually organize nodes. In g6R, combos can be created from a dataframe or a list such as:
combos <- data.frame(id = 1:2)
# or
combos <- list(
list(id = 1, label = "Combo 1"),
list(id = 2, label = "Combo 2")
)
Data properties
g6R combos are allowed to have the following properties:
-
id
: a unique identifier for the combo, required. -
type
: the type of the combo. -
data
: custom data for the combo that can be retrieved. -
style
: style properties. A comprehensive list is available here. -
states
: initial states. -
combo
: id of the parent combo if any.
Combo types
There are 2 main combo types, circle
and
rect
:
combos <- data.frame(
id = c("combo1", "combo2", "combo3"),
type = c("circle", "rect", "circle"),
combo = c("combo3", "combo3", NA)
)
nodes <- data.frame(
id = 1:4,
combo = c(
"combo1",
"combo1",
"combo2",
"combo2"
)
)
g6(nodes, combos = combos) |>
g6_layout(antv_dagre_layout()) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.id
}"
)
)
),
combo = list(
style = list(
lineWidth = 2,
labelText = JS(
"(d) => {
return d.id
}"
)
)
)
) |>
g6_behaviors(
zoom_canvas(),
collapse_expand(),
drag_element(dropEffect = "link")
)
By using drag_element(dropEffect = "link")
, you can drag
nodes into combos, which will automatically create a link between the
node and the combo in the graph data. We provide more examples in the
Shiny vignette (TBD).
Like for the edges, we implemented a custom combo type
circle-combo-with-extra-button
, which adds a button to
bottom of the combo. This button can be used to collapse or expand the
combo:
combos <- data.frame(
id = c("combo1"),
type = "circle-combo-with-extra-button"
)
nodes <- data.frame(
id = 1,
combo = c("combo1")
)
g6(nodes, combos = combos, height = "200px") |>
g6_layout(antv_dagre_layout()) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.id
}"
)
)
),
combo = list(
style = list(
lineWidth = 2,
labelPlacement = "top",
labelText = JS(
"(d) => {
return d.id
}"
)
)
)
) |>
g6_behaviors(
collapse_expand(),
drag_element()
)
Styling combos
The g6
JavaScript library exposes a wide range of style
properties for combos, which can be set in the style
property of the combo data. We list below the most outstanding
properties, but you can find a comprehensive list in the documentation.
Main graphic properties
These properties are used to define the main graphic style of the combo that depend when it is expanded or not, such as color, width, and line type. They can be applied at the global combo option level or at the individual combo level. Here is an example of how to set the color for all combo of the same graph:
combos <- data.frame(id = c("combo1"))
nodes <- data.frame(
id = 1,
combo = c("combo1")
)
g6(nodes, combos = combos, height = "200px") |>
g6_layout(d3_force_layout()) |>
g6_options(
combo = list(
style = list(
fill = "#FFB6C1", # Combo fill color
fillOpacity = 0.5, # Combo fill opacity
stroke = "#000", # Combo border color
lineWidth = 2, # Combo border width
collapsedFill = "pink",
collapsedStroke = "pink",
collapsedSize = 10 # Default is 32
)
)
) |>
g6_behaviors(
collapse_expand(),
drag_element()
)
Label styling
Some common properties include label styling:
combos <- data.frame(id = c("combo1"))
nodes <- data.frame(
id = 1,
combo = c("combo1")
)
g6(nodes, combos = combos, height = "200px") |>
g6_layout(d3_force_layout()) |>
g6_options(
combo = list(
style = list(
label = TRUE, # Whether to display the combo label
labelText = "Combo Name", # Label text content
labelFill = "#000", # Label text color
labelFontSize = 12, # Label font size
labelFontWeight = "normal", # Label font weight
labelPlacement = "bottom", # Position of the label relative to the main graphic of the combo
labelBackground = TRUE, # Whether to display the combo label background
labelBackgroundFill = "#000", # Label background fill
labelBackgroundRadius = 10, # Label background corner radius
labelBackgroundFillOpacity = 0.5 # Label background fill color opacity
)
)
) |>
g6_behaviors(
collapse_expand(),
drag_element()
)
States
Combos can have different states
that can be used to indicate different conditions or interactions.
States can be set in the states
property of the node
data:
states <- c(
"default",
"selected",
"highlight",
"active",
"inactive",
"disabled"
)
combos <- lapply(seq_along(states), \(i) {
list(
id = sprintf("combo-%s", i),
states = list(states[[i]]),
data = list(state = states[[i]])
)
})
nodes <- lapply(seq_along(states), \(i) {
list(
id = sprintf("node-%s", i),
combo = sprintf("combo-%s", i)
)
})
g6(nodes, combos = combos) |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
combo = list(
style = list(
labelText = JS(
"(d) => {
return d.data.state
}"
)
)
)
)
Color palette
g6(poke$nodes, poke$edges, poke$combos) |>
g6_layout(combo_combined_layout(spacing = 50)) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.data.label
}"
)
)
),
edge = list(
style = list(endArrow = TRUE)
),
combo = list(
style = list(
fillOpacity = 0.5
),
palette = list(
type = "group", # use discret palette
field = "family",
color = "spectral"
)
)
) |>
g6_behaviors(
zoom_canvas(),
collapse_expand(),
drag_element()
)