Introduction
Nodes belong to the graph data. In g6R, nodes can be created from a dataframe or a list such as:
nodes <- data.frame(id = 1:2)
nodes$label <- nodes$id
# or
nodes <- list(
list(id = 1, label = "Node 1"),
list(id = 2, label = "Node 2")
)While dataframes might be more convenient for simple cases, lists provides more flexibility for advanced customization since some node properties have to be nested lists, for instance style properties:
Data properties
g6R nodes are allowed to have the following properties:
-
id: a unique identifier for the node, required. -
type: the type of the node. -
data: custom data for the node that can be retrieved. -
style: style properties. A comprehensive list is available here. -
states: initial states. -
combo: id of the combo the node belongs to. Combo are describes in another vignette (TBD link). -
children: nodes ids for tree.
Node type
Builtin types are circle, rect, ellipse, diamond, triangle, hexagon, star, donut:
types <- c(
"circle",
"rect",
"ellipse",
"diamond",
"triangle",
"hexagon",
"star"
)
nodes <- lapply(seq_along(types), \(i) {
list(id = types[[i]], type = types[[i]])
})
g6(nodes) |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.id
}"
)
)
)
)Special types
Images
You can create nodes with images by setting the type to image and providing a src property in the style. The image will be displayed as the node content:
nodes <- list(
list(
id = 1,
type = "image",
style = list(
src = "https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ"
)
)
)
g6(nodes, height = "100px") |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.id
}"
)
)
)
)HTML nodes
There exists a last type which allows to create nodes with custom html. Importantly, you can’t have html nodes with other type of nodes. The type applies at the global node option level as shown in the following. The node structure is created with the innerHTML property which has to be a JavaScript callback taking node data as parameter:
nodes <- data.frame(id = 1:3)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
node = list(
type = "html",
style = list(
innerHTML = JS(
"(d) => {
return `
<div class=\"card\" style=\"width: 13rem;\">
<div class=\"card-body\">
This is node: ${d.id}
</div>
</div>`;
}"
)
)
)
)Donut
You can create donut nodes by setting the type to donut. The style property should contain a JavaScript function that returns an array of objects, each with a value, color and other possible properties described here, if you want to customize the segments of the donut. You may give an index property to the node to distinguish between different donuts and customize the output, as shown in the example below.
nodes <- list(
list(
id = 1,
index = 0
),
list(
id = 2,
index = 1
)
)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
node = list(
type = "donut",
style = list(
donuts = JS(
"(item) => {
const { index } = item;
if (index === 0) {
return [
{ value: 50, color: 'red' },
{ value: 150, color: 'green' },
{ value: 100, color: 'blue' },
];
}
if (index === 1) {
return [
{ value: 100, color: 'yellow' },
{ value: 50, color: 'purple' },
{ value: 150, color: 'orange' },
];
}
}"
)
)
)
)Styling nodes
The g6 JavaScript library exposes a wide range of style properties for nodes, which can be set in the style property of the node 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 node, such as color, width, and line type. They can be applied at the global node option level or at the individual node level. Here is an example of how to set the color for all nodes of the same graph:
nodes <- data.frame(id = 1:2)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout()) |>
g6_options(
node = list(
style = list(
fill = "#FFB6C1", # Node fill color
fillOpacity = 0.5, # Node fill opacity
stroke = "#000", # Node border color
lineWidth = 2, # Node border width
radius = 10 # Node corner radius
)
)
)Label styling
Some common properties include label styling:
nodes <- list(
list(
id = 1,
style = list(
label = TRUE, # Whether to display the node label
labelText = "Node Name", # Label text content
labelFill = "#000", # Label text color
labelFontSize = 15, # Label font size
labelFontWeight = "normal", # Label font weight
labelPlacement = "bottom" # Label position relative to the main graphic of the node
)
)
)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout())Badges
You can add badges to nodes using the badge property in the style list. Badges are small indicators that can display additional information, such as counts or statuses:
nodes <- list(
list(
id = 1,
style = list(
badge = TRUE, # Whether to display the badge
badges = list(
list(text = "A", placement = "right-top"),
list(text = "Important", placement = "right"),
list(text = "Notice", placement = "right-bottom")
),
badgePalette = c("#7E92B5", "#F4664A", "#FFBE3A"), # Badge background color palette
badgeFontSize = 7 # Badge font size
)
)
)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout())Ports
Ports are special points on nodes that can be used for connecting edges. They can be defined in the style property of the node data. You can specify the position and other properties of each port:
nodes <- list(
list(
id = 1,
style = list(
port = TRUE,
ports = list(
list(
key = "top",
placement = c(0.5, 1),
fill = "#7E92B5"
),
list(
key = "right",
placement = c(1, 0.5),
fill = "#F4664A"
),
list(
key = "bottom",
placement = c(0.5, 0),
fill = "#FFBE3A"
),
list(
key = "left",
placement = c(0, 0.5),
fill = "#D580FF"
)
),
portR = 3,
portLineWidth = 1,
portStroke = "#fff"
)
)
)
g6(nodes, height = "200px") |>
g6_layout(d3_force_layout())States
Nodes 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"
)
nodes <- lapply(seq_along(states), \(i) {
list(id = i, states = list(states[[i]]), data = list(state = states[[i]]))
})
g6(nodes) |>
g6_layout(d3_force_layout()) |>
g6_options(
animation = FALSE,
node = list(
style = list(
labelText = JS(
"(d) => {
return d.data.state
}"
)
)
)
)Update nodes data
These functions can only be used in a Shiny app context. They allow you to get or update the nodes data in the graph after it has been created. The functions are:
-
g6_add_nodes(): adds new nodes to the graph. -
g6_update_nodes(): updates existing nodes in the graph. -
g6_remove_nodes(): removes nodes from the graph. -
g6_set_nodes(): set node state. -
g6_get_nodes(): get nodes data from the graph.