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.