Variable: graph3dAttributes
ts
const graph3dAttributes: ObjectNode<{
arrangement: Attr<"preset" | "force" | "layered" | "custom", {
description: "The layout that places the nodes in space. `'preset'`: at `node.x` / `node.y` / `node.z`, which are data on the scene's axes. `'force'`: a force-directed layout in three dimensions (`force`). `'layered'`: a directed graph in planes, one per rank, the nodes of a plane spread by the force layout (`layered`). `'custom'`: the layout named by `custom.name`, which returns `z` as well. The computed arrangements hide the scene's axes and keep the layout's proportions. Default: `'preset'` when every node has an `x`, a `y` and a `z`, else `'force'`.";
editType: "calc";
values: readonly ["preset", "force", "layered", "custom"];
}>;
custom: ObjectNode<{
name: Attr<string, {
description: "With `arrangement: 'custom'`: the name of a layout registered with `registerGraphLayout(name, layout)`.";
editType: "calc";
noBlank: true;
strict: true;
}>;
options: AttrSpec<unknown, unknown>;
}>;
force: ObjectNode<Omit<{
algorithm: Attr<"spring" | "forceatlas2", {
description: "The model of the simulation. `'spring'`: links are springs with a rest length and every two nodes repel (the d3-force model); even link lengths, the usual choice. `'forceatlas2'`: links pull in proportion to their length and nodes repel in proportion to their degrees (ForceAtlas2); it pulls communities apart better in graphs with hubs.";
dflt: "spring";
editType: "calc";
values: readonly ["spring", "forceatlas2"];
}>;
charge: Attr<number, {
description: "`'spring'`: the strength of the force between every two nodes: negative values push them apart (the more negative, the larger and more open the layout), positive ones pull them together.";
dflt: -60;
editType: "calc";
}>;
collide: Attr<boolean, {
description: "Keep nodes from overlapping, each taken as a circle around its marker or box.";
dflt: true;
editType: "calc";
}>;
collidepadding: Attr<number, {
description: "With `collide`: the room left between two nodes, in layout units.";
dflt: 2;
editType: "calc";
min: 0;
}>;
gravity: Attr<number, {
description: "The pull toward the center, which keeps the parts of a graph that are not linked from drifting apart. `'spring'`: each connected part is pulled as a whole (default 0.05). `'forceatlas2'`: every node is pulled, the more links it has the harder (default 1).";
editType: "calc";
min: 0;
}>;
groupstrength: Attr<number, {
description: "The pull of every node toward the middle of its group (`node.group`), which keeps the nodes of a group together even where the links do not. 0.05 to 0.3 are usual values.";
dflt: 0;
editType: "calc";
min: 0;
}>;
linkdistance: Attr<number, {
description: "`'spring'`: the rest length of a link, in layout units (CSS px before the graph is fitted to the plot area). Links end up longer where the repulsion of their nodes stretches them.";
dflt: 30;
editType: "calc";
min: 0;
}>;
linkstrength: Attr<number, {
description: "`'spring'`: how hard a link pulls its nodes to its rest length, 0 to 1. Default: per link, 1 / the smaller degree of its two nodes, so that the links of a hub do not crush its neighbours onto it.";
editType: "calc";
max: 1;
min: 0;
}>;
linkweight: Attr<"none" | "strength" | "distance", {
description: "What `link.value` does to a link: `'strength'`: a larger value pulls harder; `'distance'`: a larger value makes the link shorter (`'spring'` only; as `'strength'` for `'forceatlas2'`); `'none'`: nothing.";
dflt: "strength";
editType: "calc";
values: readonly ["strength", "distance", "none"];
}>;
linlog: Attr<boolean, {
description: "`'forceatlas2'`: links pull with the logarithm of their length instead of the length: tighter and better separated clusters.";
dflt: false;
editType: "calc";
}>;
scalingratio: Attr<number, {
description: "`'forceatlas2'`: the repulsion between nodes; a larger value gives a larger, more open layout. Default: 10, or 1 with `linlog`.";
editType: "calc";
min: 0;
}>;
seed: Attr<number, {
description: "Seed of the generator that separates nodes at the same place. The layout is deterministic: the same figure gives the same positions everywhere; another seed gives another, equally valid, layout of graphs that have such nodes.";
dflt: 1;
editType: "calc";
min: 0;
}>;
simulate: Attr<boolean, {
description: "Show the layout settling: the nodes start in a spiral and the chart draws the simulation as it cools, a few steps per frame, ending on the same picture as without it. The axes are sized for the settled layout from the start. It runs again when something the layout reads changes (the nodes, the links, their sizes, these options), not on a change of style. Without motion (`prefers-reduced-motion`, `config.a11y.reducedMotion`), on a static plot (an image export) and for graphs of more than 2,000 nodes or 10,000 links the settled layout is drawn at once. When the layout runs off the main thread (`worker`), the positions the worker reports are what is shown, as fast as they come: nothing is replayed afterwards, and `simulate` then only says whether a dragged node pushes the others aside.";
dflt: false;
editType: "plot";
}>;
start: ObjectNode<{
alpha: Attr<number, {
description: "How warm the layout still is at these positions. 0: at rest: the positions are the layout, and nothing is simulated. Above 0 the simulation goes on from them, cooling from this value at the rate of a full run, so 0.3 moves the nodes about a little and 1 is a full run.";
dflt: 1;
editType: "calc";
max: 1;
min: 0;
}>;
x: AttrSpec<DataArray, DataArray | undefined>;
y: AttrSpec<DataArray, DataArray | undefined>;
}>;
ticks: Attr<number, {
description: "Steps of the simulation from its start to rest; the cooling is spread over them. More steps untangle a graph better and take longer. Default: 600 up to 500 nodes, fewer for larger graphs (300 from 1,000 to 3,000 nodes, 90 at 10,000).";
editType: "calc";
min: 1;
}>;
}, "simulate" | "start">>;
highlight: ObjectNode<{
color: Attr<string, {
description: "Color of the highlighted links. Default: each link's own color, made opaque.";
editType: "style";
}>;
dim: Attr<number, {
description: "Opacity factor of the nodes, links and labels that are not highlighted while something is.";
dflt: 0.15;
editType: "style";
max: 1;
min: 0;
}>;
direction: Attr<"both" | "out" | "in", {
description: "With `'neighbors'`: which links are followed from the hovered node, and from each node reached. `'both'`: all of them. `'out'`: only from a link's source to its target, which gives what the node leads to (its descendants). `'in'`: only from target to source: what leads to it (its ancestors).";
dflt: "both";
editType: "style";
values: readonly ["both", "out", "in"];
}>;
hops: Attr<number, {
description: "With `'neighbors'`: how many links away from the hovered node the highlight reaches. 1: its neighbours; 2: their neighbours too; 0: the node alone. The links between two nodes that are both at the last hop are not part of it.";
dflt: 1;
editType: "style";
min: 0;
}>;
mode: Attr<"none" | "neighbors" | `neighbors+${string}`, {
description: "What a hover emphasizes, the rest of the graph being dimmed (`highlight.dim`). `'neighbors'`: while the pointer is over a node, the node, the links that lead from it and the nodes they lead to (`highlight.hops`, `highlight.direction`); over a link, the link and its two ends. `'none'`: nothing. What is hovered is what the scene's picking finds, so there is no highlight where hover is off (`scene.hovermode: false`, `hoverinfo: 'skip'`), and none for a graph of more than 50,000 nodes and links together.";
dflt: "neighbors";
editType: "style";
extras: readonly ["none"];
flags: readonly ["neighbors"];
}>;
nodes: AttrSpec<DataArray, DataArray | undefined>;
path: AttrSpec<[number, number], [number, number] | undefined>;
pathdirected: Attr<boolean, {
description: "Whether a path follows every link from its source to its target only. Default: `true` when the links have arrowheads at their targets (`link.arrow.end`), else `false`: a path may run along a link either way.";
editType: "style";
}>;
pathweight: Attr<"value" | "hops", {
description: "What makes a path short. `'hops'`: the number of its links. `'value'`: the sum of its links' `link.value`, each taken as a cost or a distance (a link without a positive value costs 1).";
dflt: "hops";
editType: "style";
values: readonly ["hops", "value"];
}>;
}>;
hoverinfo: Attr<"all" | "none" | "skip", {
description: "Hover of nodes and links: labels (`'all'`), events without labels (`'none'`) or no hover at all (`'skip'`). The default of `node.hoverinfo` and `link.hoverinfo`.";
dflt: "all";
editType: "none";
extras: readonly ["all", "none", "skip"];
flags: readonly [];
}>;
labels: AttrSpec<DataArray, DataArray | undefined>;
layered: ObjectNode<{
axis: Attr<"x" | "y" | "z", {
description: "The axis the planes are stacked along. The first rank is at the top of it (the largest coordinate), and links run down.";
dflt: "z";
editType: "calc";
values: readonly ["x", "y", "z"];
}>;
planecolor: Attr<string, {
description: "Color of the plane outlines. Default: the link color, fainter.";
editType: "style";
}>;
ranker: Attr<"network-simplex" | "tight-tree" | "longest-path", {
description: "How nodes get their layer. `'network-simplex'`: the layers that make the links shortest in total. `'tight-tree'`: its starting point, faster and nearly as short. `'longest-path'`: every node as early as its links allow, the fastest, with longer links.";
dflt: "network-simplex";
editType: "calc";
values: readonly ["network-simplex", "tight-tree", "longest-path"];
}>;
ranksep: Attr<number, {
description: "Distance between two planes, in layout units.";
dflt: 80;
editType: "calc";
min: 0;
}>;
showplanes: Attr<boolean, {
description: "Draw a faint outline around every plane.";
dflt: true;
editType: "plot";
}>;
}>;
link: ObjectNode<{
arrow: ObjectNode<{
end: Attr<boolean, {
description: "Draw an arrowhead at the target end of every link (a directed graph). Default: `true` with `arrangement: 'layered'`, whose links all point one way, else `false`.";
dflt: false;
editType: "plot";
}>;
size: Attr<number, {
description: "Length of the arrowheads in CSS px; a wide link gets a head at least three times its width.";
dflt: 8;
editType: "plot";
min: 0;
}>;
start: Attr<boolean, {
description: "Draw an arrowhead at the source end of every link.";
dflt: false;
editType: "plot";
}>;
}>;
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Link color, or one per link. Default: a translucent gray that reads on the plot background, light or dark.";
editType: "style";
}>;
curve: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "How far a link bows out, as a fraction of its length: 0 is straight, positive bows to the left of its direction, negative to the right. One value, or one per link. Default: straight, except that the links between the same two nodes are fanned out so that each can be seen. A value replaces that fan: one value for all links draws the links between the same two nodes on top of each other (give one value per link to keep them apart), and in an array a link without a number keeps its place in the fan. A link the layout routed keeps its route.";
editType: "plot";
max: 2;
min: -2;
}>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
dash: Attr<string, {
description: "Dash style of every link: `'solid'`, `'dot'`, `'dash'`, `'longdash'`, `'dashdot'`, `'longdashdot'`, or a dash list such as `'5px,10px,2px'`.";
dflt: "solid";
editType: "style";
}>;
hoverinfo: Attr<"all" | "none" | "skip", {
description: `Hover of ${string}: labels (`'all'`), events without labels (`'none'`) or no hover and no events (`'skip'`). Default: the trace `hoverinfo`.`;
dflt: "all";
editType: "none";
values: readonly ["all", "none", "skip"];
}>;
hovertemplate: Attr<string, {
description: "Template of the link hover labels: `%{label}`, `%{value}`, `%{source.label}`, `%{target.label}`, `%{source.index}`, `%{target.index}`, `%{customdata}`. `<extra>…</extra>` replaces the trace name.";
editType: "none";
}>;
label: AttrSpec<DataArray, DataArray | undefined>;
opacity: Attr<number, {
description: "Link opacity (multiplied by the trace `opacity` and the color alpha).";
dflt: 1;
editType: "style";
max: 1;
min: 0;
}>;
render: Attr<"auto" | "line" | "tube", {
description: "`'line'`: screen-space lines, `link.width` CSS px wide at every depth. `'tube'`: lit tubes `link.width` across, which are part of the scene like the spheres. `'auto'`: tubes when the widest link is 3 px or wider and the graph has at most 5,000 links, else lines.";
dflt: "auto";
editType: "plot";
values: readonly ["auto", "line", "tube"];
}>;
source: AttrSpec<DataArray, DataArray | undefined>;
target: AttrSpec<DataArray, DataArray | undefined>;
value: AttrSpec<DataArray, DataArray | undefined>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Link width in CSS px, or one per link. Ignored with `link.widthby`.";
dflt: 1;
editType: "plot";
min: 0;
}>;
widthby: Attr<"none" | "value", {
description: "`'value'`: widths from `link.value`, proportional to it, between the two widths of `link.widthrange` (the largest value gets the second).";
dflt: "none";
editType: "plot";
values: readonly ["none", "value"];
}>;
widthrange: AttrSpec<[number, number], [number, number]>;
}>;
node: ObjectNode<{
autocolorscale: AttrSpec<boolean, boolean | undefined>;
cauto: AttrSpec<boolean, boolean | undefined>;
cmax: AttrSpec<number, number | undefined>;
cmid: AttrSpec<number, number | undefined>;
cmin: AttrSpec<number, number | undefined>;
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Node color, one CSS color per node, or numbers mapped through `colorscale` (with a colorbar when `showscale` is on). Default: the group's color when `node.group` is given (the colorway, one color per group), else the trace's colorway color.";
editType: "style";
}>;
coloraxis: AttrSpec<string, string | undefined>;
colorbar: ObjectNode<{
bgcolor: Attr<string, {
description: "Background of the box.";
dflt: "rgba(0,0,0,0)";
}>;
bordercolor: Attr<string, {
description: "Border color of the colorbar box.";
dflt: "#444";
}>;
borderwidth: Attr<number, {
description: "Border width of the box, px.";
dflt: 0;
min: 0;
}>;
dtick: AttrSpec<unknown, unknown>;
exponentformat: Attr<"none" | "e" | "E" | "power" | "SI" | "B", {
description: "How large and small numbers are written: `none` (1000000), `e` (1e+6), `E` (1E+6), `power` (1×10⁶), `SI` (1M), `B` (like SI but 1B for 10⁹).";
dflt: "B";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
values: readonly ["none", "e", "E", "power", "SI", "B"];
}>;
len: Attr<number, {
description: "Length of the colorbar along its axis, padding included (`ypad` / `xpad`).";
dflt: 1;
min: 0;
}>;
lenmode: Attr<"fraction" | "pixels", {
description: "Unit of `len`: px, or a fraction of the plot height (`v`) / width (`h`).";
dflt: "fraction";
values: readonly ["fraction", "pixels"];
}>;
minexponent: Attr<number, {
description: "Smallest decimal exponent written in exponent form (`SI`/`B` and exponent formats); smaller magnitudes are written out in full.";
dflt: 3;
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
min: 0;
}>;
nticks: Attr<number, {
description: "Maximum number of ticks for `tickmode: auto` (the actual number may be lower so steps stay round). 0 picks it from the axis length.";
dflt: 0;
editType: "ticks";
min: 0;
}>;
orientation: Attr<"h" | "v", {
description: "Vertical bar (`v`, beside the plot) or horizontal bar (`h`, above or below).";
dflt: "v";
values: readonly ["h", "v"];
}>;
outlinecolor: Attr<string, {
description: "Color of the outline around the bar.";
dflt: "#444";
}>;
outlinewidth: Attr<number, {
description: "Outline width, px.";
dflt: 1;
min: 0;
}>;
separatethousands: Attr<boolean, {
description: "Always separate thousands (1,000). By default only numbers with 5 or more integer digits are separated.";
dflt: false;
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
}>;
showexponent: Attr<"all" | "none" | "first" | "last", {
description: "Which tick labels show the exponent.";
dflt: "all";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
values: readonly ["all", "first", "last", "none"];
}>;
showticklabels: Attr<boolean, {
description: "Show tick labels.";
dflt: true;
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
}>;
showtickprefix: Attr<"all" | "none" | "first" | "last", {
description: "Which tick labels get `tickprefix`.";
dflt: "all";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
values: readonly ["all", "first", "last", "none"];
}>;
showticksuffix: Attr<"all" | "none" | "first" | "last", {
description: "Which tick labels get `ticksuffix`.";
dflt: "all";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
values: readonly ["all", "first", "last", "none"];
}>;
thickness: Attr<number, {
description: "Thickness of the color bar.";
dflt: 30;
min: 0;
}>;
thicknessmode: Attr<"fraction" | "pixels", {
description: "Unit of `thickness`: px, or a fraction of the plot width (`v`) / height (`h`).";
dflt: "pixels";
values: readonly ["fraction", "pixels"];
}>;
tick0: AttrSpec<unknown, unknown>;
tickangle: Attr<number | "auto", {
description: "Tick-label rotation in degrees. `auto` rotates x-axis labels by the first `autotickangles` entry that avoids overlap.";
dflt: "auto";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
extras: readonly ["auto"];
}>;
tickcolor: Attr<string, {
description: "Tick color. Defaults to `color`.";
editType: "ticks";
}>;
tickfont: ObjectNode<{
color: Attr<string, {
description: "Text color.";
editType: "style";
}>;
family: Attr<string, {
description: "CSS font-family list. The renderer uses the first family it can load and falls back through the list.";
noBlank: true;
strict: true;
}>;
lineposition: Attr<
| "none"
| "under"
| "over"
| "through"
| `under+${(...)}`
| `over+${(...)}`
| `through+${(...)}`, {
description: "Text decoration: `under`, `over` and/or `through` joined with `+` (e.g. `under+over`), or `none`.";
extras: readonly [...];
flags: readonly [..., ..., ...];
}>;
shadow: Attr<string, {
description: "CSS `text-shadow` behind the text (`2px 2px 3px black`; only the first shadow is drawn), `none`, or `auto` for a thin halo in the contrast color of the text.";
}>;
size: Attr<number, {
description: "Font size in CSS pixels.";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
values: readonly [..., ...];
}>;
textcase: Attr<"normal" | "word caps" | "upper" | "lower", {
description: "Letter case transform: `upper`, `lower`, `word caps` (first letter of each word), or `normal`.";
values: readonly [..., ..., ..., ...];
}>;
variant: Attr<
| "normal"
| "small-caps"
| "all-small-caps"
| "all-petite-caps"
| "petite-caps"
| "unicase", {
description: "Capitals variant (CSS `font-variant-caps`). The SDF text renderer approximates small and petite caps with uppercase letters at a reduced size.";
values: readonly [..., ..., ..., ..., ..., ...];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
extras: readonly [..., ...];
max: 1000;
min: 1;
}>;
}>;
tickformat: Attr<string, {
description: "Tick-label format: a d3-format specifier for numbers (`.2f`, `~s`, `$,`) or a d3-time-format specifier for dates (`%b %Y`), plus `%{n}f` for `n` digits of fractional seconds and `%h` for the half year. Empty picks a format automatically.";
dflt: "";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
}>;
ticklabeloverflow: Attr<"allow" | "hide past div" | "hide past domain", {
description: "Hide labels past the figure or past the bar. Defaults to `hide past domain` for inside labels, else `hide past div`.";
values: readonly ["allow", "hide past div", "hide past domain"];
}>;
ticklabelposition: Attr<
| "outside"
| "inside"
| "outside top"
| "inside top"
| "outside left"
| "inside left"
| "outside right"
| "inside right"
| "outside bottom"
| "inside bottom", {
description: "Tick labels outside the bar (away from it) or inside (over it); `top`/`bottom` (`v`) or `left`/`right` (`h`) move them beside their tick.";
dflt: "outside";
values: readonly ["outside", "inside", "outside top", "inside top", "outside bottom", "inside bottom", "outside left", "inside left", "outside right", "inside right"];
}>;
ticklabelstep: Attr<number, {
description: "Label every n-th tick only (`tickmode` `auto` and `linear`).";
dflt: 1;
editType: "ticks";
min: 1;
}>;
ticklen: Attr<number, {
description: "Tick length in px.";
dflt: 5;
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
min: 0;
}>;
tickmode: Attr<"auto" | "linear" | "array" | "sync", {
description: "`auto` picks up to `nticks` round ticks; `linear` places ticks from `tick0` every `dtick`; `array` uses `tickvals`/`ticktext`; `sync` aligns with the overlaid axis (reserved; behaves as `auto`). Defaults to `array` when `tickvals` is set, `linear` when `dtick` is set, else `auto`.";
editType: "ticks";
values: readonly ["auto", "linear", "array", "sync"];
}>;
tickprefix: Attr<string, {
description: "Text before each tick label.";
dflt: "";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
}>;
ticks: Attr<"" | "outside" | "inside", {
description: "Draw tick marks outside or inside the plot area, or not at all (`''`).";
dflt: "";
editType: EditType;
values: readonly ["outside", "inside", ""];
}>;
ticksuffix: Attr<string, {
description: "Text after each tick label.";
dflt: "";
editType: readonly (
| "none"
| "legend"
| "calc"
| "calcIfAutorange"
| "crossTraceCalc"
| "layout"
| "ticks"
| "plot"
| "style"
| "colorbars"
| "modebar"
| "camera")[];
}>;
ticktext: AttrSpec<DataArray, DataArray | undefined>;
tickvals: AttrSpec<DataArray, DataArray | undefined>;
tickwidth: Attr<number, {
description: "Tick width in px.";
dflt: 1;
editType: "ticks";
min: 0;
}>;
title: ObjectNode<{
font: ObjectNode<{
color: Attr<..., ...>;
family: Attr<..., ...>;
lineposition: Attr<..., ...>;
shadow: Attr<..., ...>;
size: Attr<..., ...>;
style: Attr<..., ...>;
textcase: Attr<..., ...>;
variant: Attr<..., ...>;
weight: Attr<..., ...>;
}>;
side: Attr<"right" | "top" | "bottom", {
description: "Where the title goes relative to the bar. Defaults to `top` (`v`) or `right` (`h`).";
values: readonly [..., ..., ...];
}>;
text: Attr<string, {
description: "Colorbar title.";
dflt: "";
}>;
}>;
x: Attr<number, {
description: "Horizontal position (`xref` fraction). Defaults to 1.02 (`v`, paper), 1 (`v`, container) or 0.5 (`h`).";
}>;
xanchor: Attr<"left" | "center" | "right", {
description: "Which side of the colorbar sits at `x`. Defaults to `left` (`v`, paper), `right` (`v`, container) or `center` (`h`).";
values: readonly ["left", "center", "right"];
}>;
xpad: Attr<number, {
description: "Horizontal padding, px.";
dflt: 10;
min: 0;
}>;
xref: Attr<"container" | "paper", {
description: "Reference of `x`: the plot area (`paper`) or the whole figure.";
dflt: "paper";
values: readonly ["container", "paper"];
}>;
y: Attr<number, {
description: "Vertical position (`yref` fraction). Defaults to 0.5 (`v`), 1.02 (`h`, paper) or 1 (`h`, container).";
}>;
yanchor: Attr<"middle" | "top" | "bottom", {
description: "Which side of the colorbar sits at `y`. Defaults to `middle` (`v`), `bottom` (`h`, paper) or `top` (`h`, container).";
values: readonly ["top", "middle", "bottom"];
}>;
ypad: Attr<number, {
description: "Vertical padding, px.";
dflt: 10;
min: 0;
}>;
yref: Attr<"container" | "paper", {
description: "Reference of `y`: the plot area (`paper`) or the whole figure.";
dflt: "paper";
values: readonly ["container", "paper"];
}>;
}>;
colorscale: AttrSpec<ColorScale, ColorScale | undefined>;
customdata: AttrSpec<DataArray, DataArray | undefined>;
group: AttrSpec<DataArray, DataArray | undefined>;
hoverinfo: Attr<"all" | "none" | "skip", {
description: `Hover of ${string}: labels (`'all'`), events without labels (`'none'`) or no hover and no events (`'skip'`). Default: the trace `hoverinfo`.`;
dflt: "all";
editType: "none";
values: readonly ["all", "none", "skip"];
}>;
hovertemplate: Attr<string, {
description: "Template of the node hover labels: `%{label}`, `%{degree}`, `%{indegree}`, `%{outdegree}`, `%{neighbors}` (the number of nodes it is linked to), `%{group}`, `%{value}`, `%{size}`, `%{color}`, `%{x}`, `%{y}`, `%{customdata}`. `<extra>…</extra>` replaces the trace name.";
editType: "none";
}>;
label: AttrSpec<DataArray, DataArray | undefined>;
line: ObjectNode<{
color: Attr<string | readonly string[], {
arrayOk: true;
description: "Outline color of the nodes, or one per node. Default: the plot background, so that nodes stand out from the links and from each other.";
editType: "style";
}>;
width: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Outline width of the nodes in CSS px, or one per node.";
dflt: 1;
editType: "style";
min: 0;
}>;
}>;
opacity: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Node opacity (multiplied by the trace `opacity`), or one per node.";
dflt: 1;
editType: "style";
max: 1;
min: 0;
}>;
render: Attr<"sphere" | "sprite", {
description: "`'sphere'`: lit spheres that are part of the scene: `node.size` is their diameter in CSS px at the middle of the scene in its first view, so nodes are larger near the camera and grow when it comes closer. `'sprite'`: flat markers (`node.symbol`, `node.line`) that face the camera and keep `node.size` CSS px at every depth, as `scatter3d` markers do.";
dflt: "sphere";
editType: "calc";
values: readonly ["sphere", "sprite"];
}>;
reversescale: AttrSpec<boolean, boolean>;
showscale: AttrSpec<boolean, boolean>;
size: Attr<
| number
| TypedArray
| readonly number[], {
arrayOk: true;
description: "Node diameter in CSS px, or one per node. Ignored with `node.sizeby` and for box nodes. Default: 10, and 6 in a `'dendrogram'`, whose nodes are points on a scale.";
dflt: 10;
editType: "calc";
min: 0;
}>;
sizeby: Attr<"none" | "degree" | "indegree" | "outdegree", {
description: "Size nodes by their links instead of `node.size`: `'degree'` (all links at the node), `'indegree'` (links that end at it) or `'outdegree'` (links that start at it). The area grows with the count, between the two diameters of `node.sizerange`.";
dflt: "none";
editType: "calc";
values: readonly ["none", "degree", "indegree", "outdegree"];
}>;
sizerange: AttrSpec<[number, number], [number, number]>;
symbol: Attr<
| PrimitiveValue
| readonly PrimitiveValue[], {
accepts: (value) => boolean;
arrayOk: true;
description: "Marker symbol: a name (`'diamond-open'`), a Plotly numeric code, a custom symbol registered with `symbols.register` (with the same `-open` / `-dot` variants), a `'text:…'` glyph such as `'text:🚀'`, or one per point.";
dflt: "circle";
editType: "style";
values: readonly PrimitiveValue[];
}>;
textfont: ObjectNode<{
color: Attr<string, {
description: "Text color. Default: `layout.font.color`; inside a box node, black or white, whichever reads better on the box.";
editType: "plot";
}>;
family: Attr<string, {
description: "CSS font-family list. Default: `layout.font.family`.";
editType: "calc";
noBlank: true;
strict: true;
}>;
shadow: Attr<string, {
description: "CSS `text-shadow` (first shadow only), `'none'`, or `'auto'` (the default): a thin halo in the text's contrast color, so labels read over the links.";
editType: "plot";
}>;
size: Attr<number, {
description: "Font size in CSS px. Default: `layout.font.size`.";
editType: "calc";
min: 1;
}>;
style: Attr<"normal" | "italic", {
description: "Font style.";
editType: "calc";
values: readonly ["normal", "italic"];
}>;
weight: Attr<number | "normal" | "bold", {
description: "Font weight: a CSS numeric weight (1–1000), `normal` or `bold`.";
editType: "calc";
extras: readonly ["normal", "bold"];
max: 1000;
min: 1;
}>;
}>;
textposition: Attr<
| "none"
| "auto"
| "top left"
| "top center"
| "top right"
| "middle left"
| "middle center"
| "middle right"
| "bottom left"
| "bottom center"
| "bottom right", {
description: "Where the label sits relative to its marker. `'auto'`: where the arrangement leaves room. To the right of the node in general; pointing away from the center around a `'circular'` arrangement; in a tree, beyond a leaf and before a node with children (turned upright under the leaves of a tree that grows downwards or upwards, and along the radius in a `'radial'` tree, never upside down); under the line of an `'arc'` diagram, upright; beside the axes of a `'hive'` plot. `'none'` draws no labels (they still show in hover labels). Box nodes have their label inside.";
dflt: "auto";
editType: "calc";
values: readonly ["auto", "top left", "top center", "top right", "middle left", "middle center", "middle right", "bottom left", "bottom center", "bottom right", "none"];
}>;
x: AttrSpec<DataArray, DataArray | undefined>;
y: AttrSpec<DataArray, DataArray | undefined>;
z: AttrSpec<DataArray, DataArray | undefined>;
}>;
parents: AttrSpec<DataArray, DataArray | undefined>;
scene: Attr<"scene" | `scene${number}`, {
description: "The 3D scene this trace is drawn in: `'scene'` (`layout.scene`), `'scene2'` (`layout.scene2`), ….";
dflt: "scene";
editType: "calc";
}>;
}>;Experimental
The graph3d schema.