Skip to content

Interface: Graph3dTraceNode ​

The nodes.

Properties ​

PropertyTypeDefault valueDescription
autocolorscale?booleanundefinedPick the colorscale from the sign of the color domain (Reds for ≥ 0, Blues for ≤ 0, RdBu across 0). Defaults to true unless colorscale is given.
cauto?booleanundefinedCompute the color domain from the numeric node.color values. Defaults to false when both cmin and cmax are given.
cmax?numberundefinedValue mapped to the last colorscale color (with cmin; turns cauto off).
cmid?numberundefinedWith cauto, widen the automatic domain so it is symmetric around this value (diverging data).
cmin?numberundefinedValue mapped to the first colorscale color (with cmax; turns cauto off).
color?PerPointColorundefinedNode 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.
coloraxis?"coloraxis" | `coloraxis${number}`"coloraxis"Share a colorscale and domain with other traces through layout.coloraxis ('coloraxis', 'coloraxis2', …). Overrides this container's colorscale attributes.
colorbar?ColorbarundefinedThe colorbar of this colorscale (plan E5.3).
colorscale?| ColorScale | readonly string[] | readonly readonly (string | number)[][]undefinedColorscale for numeric node.color values: a name ('Viridis', 'RdBu', …), a list of colors, or [position, color] stops from 0 to 1.
customdata?DataColumnundefinedExtra data per node for %{customdata} and events.
group?DataColumnundefinedA group per node (a name or a number; empty for none): colors the nodes by group, gives the legend one item per group, which a click hides, and keeps the nodes of a group together in the arrangements that can.
hoverinfo?"all" | "none" | "skip""all"Hover of the nodes: labels ('all'), events without labels ('none') or no hover and no events ('skip'). Default: the trace hoverinfo.
hovertemplate?stringundefinedTemplate of the node hover labels: %{label}, %{degree}, %{indegree}, %{outdegree}, %{group}, %{size}, %{color}, %{x}, %{y}, %{z}, %{customdata}. <extra>…</extra> replaces the trace name.
label?DataColumnundefinedNode labels, one per node index: drawn next to the node (see node.textposition) and shown in hover labels. Where labels would overlap on screen, the nodes with the most links keep theirs; turning the scene or moving closer shows others.
line?Graph3dTraceNodeLineundefinedOutlines of the nodes (node.render: 'sprite' only).
opacity?PerPointNumber1Node opacity (multiplied by the trace opacity), or one per node. Range: 0 – 1
render?"sphere" | "sprite""sphere"'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.
reversescale?booleanfalseReverse the colorscale (the lowest value gets the last color).
showscale?booleanfalseShow a colorbar for this colorscale (drawn by the colorbar component, plan E5.3).
size?PerPointNumber10Node diameter in CSS px, or one per node. A sphere has that size at the middle of the scene in its first view (see node.render); a sprite has it everywhere. Ignored with node.sizeby. Minimum: 0
sizeby?"none" | "degree" | "indegree" | "outdegree""none"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.
sizerange?readonly number[][6,30]With node.sizeby: the diameters in CSS px of a node without links and of the node with the most.
symbol?PerPoint< | 0 | 2 | "circle" | "0" | "circle-open" | 100 | "100" | "circle-dot" | 200 | "200" | "circle-open-dot" | 300 | "300" | "square" | 1 | "1" | "square-open" | 101 | "101" | "square-dot" | 201 | "201" | "square-open-dot" | 301 | "301" | "diamond" | "2" | "diamond-open" | 102 | "102" | "diamond-dot" | 202 | "202" | "diamond-open-dot" | 302 | "302" | "cross" | 3 | "3" | "cross-open" | 103 | "103" | "cross-dot" | 203 | "203" | "cross-open-dot" | 303 | "303" | "x" | 4 | "4" | "x-open" | 104 | "104" | "x-dot" | 204 | "204" | "x-open-dot" | 304 | "304" | "triangle-up" | 5 | "5" | "triangle-up-open" | 105 | "105" | "triangle-up-dot" | 205 | "205" | "triangle-up-open-dot" | 305 | "305" | "triangle-down" | 6 | "6" | "triangle-down-open" | 106 | "106" | "triangle-down-dot" | 206 | "206" | "triangle-down-open-dot" | 306 | "306" | "triangle-left" | 7 | "7" | "triangle-left-open" | 107 | "107" | "triangle-left-dot" | 207 | "207" | "triangle-left-open-dot" | 307 | "307" | "triangle-right" | 8 | "8" | "triangle-right-open" | 108 | "108" | "triangle-right-dot" | 208 | "208" | "triangle-right-open-dot" | 308 | "308" | "triangle-ne" | 9 | "9" | "triangle-ne-open" | 109 | "109" | "triangle-ne-dot" | 209 | "209" | "triangle-ne-open-dot" | 309 | "309" | "triangle-se" | 10 | "10" | "triangle-se-open" | 110 | "110" | "triangle-se-dot" | 210 | "210" | "triangle-se-open-dot" | 310 | "310" | "triangle-sw" | 11 | "11" | "triangle-sw-open" | 111 | "111" | "triangle-sw-dot" | 211 | "211" | "triangle-sw-open-dot" | 311 | "311" | "triangle-nw" | 12 | "12" | "triangle-nw-open" | 112 | "112" | "triangle-nw-dot" | 212 | "212" | "triangle-nw-open-dot" | 312 | "312" | "pentagon" | 13 | "13" | "pentagon-open" | 113 | "113" | "pentagon-dot" | 213 | "213" | "pentagon-open-dot" | 313 | "313" | "hexagon" | 14 | "14" | "hexagon-open" | 114 | "114" | "hexagon-dot" | 214 | "214" | "hexagon-open-dot" | 314 | "314" | "hexagon2" | 15 | "15" | "hexagon2-open" | 115 | "115" | "hexagon2-dot" | 215 | "215" | "hexagon2-open-dot" | 315 | "315" | "octagon" | 16 | "16" | "octagon-open" | 116 | "116" | "octagon-dot" | 216 | "216" | "octagon-open-dot" | 316 | "316" | "star" | 17 | "17" | "star-open" | 117 | "117" | "star-dot" | 217 | "217" | "star-open-dot" | 317 | "317" | "hexagram" | 18 | "18" | "hexagram-open" | 118 | "118" | "hexagram-dot" | 218 | "218" | "hexagram-open-dot" | 318 | "318" | "star-triangle-up" | 19 | "19" | "star-triangle-up-open" | 119 | "119" | "star-triangle-up-dot" | 219 | "219" | "star-triangle-up-open-dot" | 319 | "319" | "star-triangle-down" | 20 | "20" | "star-triangle-down-open" | 120 | "120" | "star-triangle-down-dot" | 220 | "220" | "star-triangle-down-open-dot" | 320 | "320" | "star-square" | 21 | "21" | "star-square-open" | 121 | "121" | "star-square-dot" | 221 | "221" | "star-square-open-dot" | 321 | "321" | "star-diamond" | 22 | "22" | "star-diamond-open" | 122 | "122" | "star-diamond-dot" | 222 | "222" | "star-diamond-open-dot" | 322 | "322" | "diamond-tall" | 23 | "23" | "diamond-tall-open" | 123 | "123" | "diamond-tall-dot" | 223 | "223" | "diamond-tall-open-dot" | 323 | "323" | "diamond-wide" | 24 | "24" | "diamond-wide-open" | 124 | "124" | "diamond-wide-dot" | 224 | "224" | "diamond-wide-open-dot" | 324 | "324" | "hourglass" | 25 | "25" | "hourglass-open" | 125 | "125" | "hourglass-dot" | 225 | "225" | "hourglass-open-dot" | 325 | "325" | "bowtie" | 26 | "26" | "bowtie-open" | 126 | "126" | "bowtie-dot" | 226 | "226" | "bowtie-open-dot" | 326 | "326" | "circle-cross" | 27 | "27" | "circle-cross-open" | 127 | "127" | "circle-cross-dot" | 227 | "227" | "circle-cross-open-dot" | 327 | "327" | "circle-x" | 28 | "28" | "circle-x-open" | 128 | "128" | "circle-x-dot" | 228 | "228" | "circle-x-open-dot" | 328 | "328" | "square-cross" | 29 | "29" | "square-cross-open" | 129 | "129" | "square-cross-dot" | 229 | "229" | "square-cross-open-dot" | 329 | "329" | "square-x" | 30 | "30" | "square-x-open" | 130 | "130" | "square-x-dot" | 230 | "230" | "square-x-open-dot" | 330 | "330" | "diamond-cross" | 31 | "31" | "diamond-cross-open" | 131 | "131" | "diamond-cross-dot" | 231 | "231" | "diamond-cross-open-dot" | 331 | "331" | "diamond-x" | 32 | "32" | "diamond-x-open" | 132 | "132" | "diamond-x-dot" | 232 | "232" | "diamond-x-open-dot" | 332 | "332" | "cross-thin" | 33 | "33" | "cross-thin-open" | 133 | "133" | "cross-thin-dot" | 233 | "233" | "cross-thin-open-dot" | 333 | "333" | "x-thin" | 34 | "34" | "x-thin-open" | 134 | "134" | "x-thin-dot" | 234 | "234" | "x-thin-open-dot" | 334 | "334" | "asterisk" | 35 | "35" | "asterisk-open" | 135 | "135" | "asterisk-dot" | 235 | "235" | "asterisk-open-dot" | 335 | "335" | "hash" | 36 | "36" | "hash-open" | 136 | "136" | "hash-dot" | 236 | "236" | "hash-open-dot" | 336 | "336" | "y-up" | 37 | "37" | "y-up-open" | 137 | "137" | "y-up-dot" | 237 | "237" | "y-up-open-dot" | 337 | "337" | "y-down" | 38 | "38" | "y-down-open" | 138 | "138" | "y-down-dot" | 238 | "238" | "y-down-open-dot" | 338 | "338" | "y-left" | 39 | "39" | "y-left-open" | 139 | "139" | "y-left-dot" | 239 | "239" | "y-left-open-dot" | 339 | "339" | "y-right" | 40 | "40" | "y-right-open" | 140 | "140" | "y-right-dot" | 240 | "240" | "y-right-open-dot" | 340 | "340" | "line-ew" | 41 | "41" | "line-ew-open" | 141 | "141" | "line-ew-dot" | 241 | "241" | "line-ew-open-dot" | 341 | "341" | "line-ns" | 42 | "42" | "line-ns-open" | 142 | "142" | "line-ns-dot" | 242 | "242" | "line-ns-open-dot" | 342 | "342" | "line-ne" | 43 | "43" | "line-ne-open" | 143 | "143" | "line-ne-dot" | 243 | "243" | "line-ne-open-dot" | 343 | "343" | "line-nw" | 44 | "44" | "line-nw-open" | 144 | "144" | "line-nw-dot" | 244 | "244" | "line-nw-open-dot" | 344 | "344" | "arrow-up" | 45 | "45" | "arrow-up-open" | 145 | "145" | "arrow-up-dot" | 245 | "245" | "arrow-up-open-dot" | 345 | "345" | "arrow-down" | 46 | "46" | "arrow-down-open" | 146 | "146" | "arrow-down-dot" | 246 | "246" | "arrow-down-open-dot" | 346 | "346" | "arrow-left" | 47 | "47" | "arrow-left-open" | 147 | "147" | "arrow-left-dot" | 247 | "247" | "arrow-left-open-dot" | 347 | "347" | "arrow-right" | 48 | "48" | "arrow-right-open" | 148 | "148" | "arrow-right-dot" | 248 | "248" | "arrow-right-open-dot" | 348 | "348" | "arrow-bar-up" | 49 | "49" | "arrow-bar-up-open" | 149 | "149" | "arrow-bar-up-dot" | 249 | "249" | "arrow-bar-up-open-dot" | 349 | "349" | "arrow-bar-down" | 50 | "50" | "arrow-bar-down-open" | 150 | "150" | "arrow-bar-down-dot" | 250 | "250" | "arrow-bar-down-open-dot" | 350 | "350" | "arrow-bar-left" | 51 | "51" | "arrow-bar-left-open" | 151 | "151" | "arrow-bar-left-dot" | 251 | "251" | "arrow-bar-left-open-dot" | 351 | "351" | "arrow-bar-right" | 52 | "52" | "arrow-bar-right-open" | 152 | "152" | "arrow-bar-right-dot" | 252 | "252" | "arrow-bar-right-open-dot" | 352 | "352" | "arrow" | 53 | "53" | "arrow-open" | 153 | "153" | "arrow-dot" | 253 | "253" | "arrow-open-dot" | 353 | "353" | "arrow-wide" | 54 | "54" | "arrow-wide-open" | 154 | "154" | "arrow-wide-dot" | 254 | "254" | "arrow-wide-open-dot" | 354 | "354" | string & object>"circle"The marker symbol of node.render: 'sprite'.
textfont?GraphTraceNodeTextfontundefinedFont of the node labels. Default: layout.font, with the automatic halo (shadow: auto). Family, size, weight and style set the size of box nodes.
textposition?| "none" | "auto" | "top left" | "top center" | "top right" | "middle left" | "middle center" | "middle right" | "bottom left" | "bottom center" | "bottom right""auto"Where the label sits relative to its node on screen. 'auto': to the right. 'none' draws no labels (they still show in hover labels).
x?DataColumnundefinedNode x positions. With arrangement: 'preset' they are data on the scene's x axis and a node without all three coordinates is not drawn. With a computed arrangement they are layout units: a node with x, y and z stays where it is, and one with some of them is held along those axes.
y?DataColumnundefinedNode y positions (see node.x).
z?DataColumnundefinedNode z positions (see node.x).

Released under the MIT License.