NetworkStyle
Defined in: network/network.ts:212
Visual style. Link appearance accessors arrive with the link pass (#100 N2.2).
Properties
Section titled “Properties”arrowSize?
Section titled “arrowSize?”
optionalarrowSize?:number
Defined in: network/network.ts:294
Arrowhead size (world units) for directed linkStyle:"line" links. Default 3 × linkWidth.
directed?
Section titled “directed?”
optionaldirected?:boolean
Defined in: network/network.ts:214
Render links with arrowheads. Defaults to the graph’s directed flag.
flowBorder?
Section titled “flowBorder?”
optionalflowBorder?:FlowBorderSpec
Defined in: network/network.ts:314
Flow-border ring (N6 / #104): draw each node/module as a disc with an outer ring whose width
encodes a per-node enter/exit flow (flow: an app Float32Array or a built-in metric) via
scale. LOD aggregates sum their members’ flow, unless a module of the engine’s hierarchy has its
own value from moduleFlow(path) (#445). With moduleFlow alone — no flow, as for an Infomap
.ftree, which has each module’s flow but none per node (#471) — only the modules with a value are
ringed. With share: true (#510) the border covers the share of each node’s flow that leaves it
instead — its exit flow (flow) over its flow (the graph’s node flow), as a share of its area — with no
scale. Fill/size still come
from nodeFill/nodeRadius (size by total flow with nodeRadius: { by: "flow", scale }). Omit
for plain filled nodes.
importance?
Section titled “importance?”
optionalimportance?:ImportanceSpec
Defined in: network/network.ts:229
Per-node declutter importance — which glyph wins when two overlap (the kept one). A
NodeMetric/accessor/Float32Array, or "order" (input order). Summed up the LOD tree, so a
module’s importance is its members’ total. Defaults to the nodeRadius size metric (biggest
wins), falling back to input order for a constant size.
linkBend?
Section titled “linkBend?”
optionallinkBend?:number
Defined in: network/network.ts:322
Bend links into curves (N6c / #104). The quadratic-bezier control offset ⟂ to the chord as a
fraction of chord length, for linkStyle:"line" and "half-arrow" alike (try ~0.15; 0
(default) keeps links straight). Because it is relative, a link keeps its shape at every zoom in
both size modes (#296). For half-arrows the bow side is derived from the link direction so a
reciprocal A→B / B→A pair nests around a shared centre curve instead of colliding.
linkStroke?
Section titled “linkStroke?”
optionallinkStroke?:LinkColorSpec
Defined in: network/network.ts:292
Link colour. A single CSS colour (default a light grey), or a (weight) => cssColour scale so
colour encodes the edge weight/flow (a bare d3 colour scale fits). The arrowhead always takes the
link’s colour — there is no separate arrow fill.
The colour is captured once per style() (or data()) call and remembered per weight, so a
scale must be a pure function of the weight. A scale changed in place (a new domain or range, an
accessor reading mutable state such as a theme) takes effect on the next style() call — pass it
again then. Until then, what a backend redraws with is unspecified.
linkStyle?
Section titled “linkStyle?”
optionallinkStyle?:LinkStyle
Defined in: network/network.ts:269
How directed links are drawn (#104 N6). "line" (default) — a stroked line (straight, or bowed
by linkBend) plus a separate triangle arrowhead, as in the large-scale layout example.
"half-arrow" — the map-of-networks glyph: one filled shape per link that pinches to the
source centre and ends in a barbed arrowhead on the target node’s boundary, with reciprocal
A→B / B→A links nesting around a shared centre curve. (Half-arrow links are world-sized.)
"none" — draw the network as nodes only (#157): the links, arrowheads and LOD super-edges
are not built — no geometry, no per-edge colour/width pass, no GPU upload — so turning links off
on a million-edge graph costs nothing rather than uploading a buffer to hide. A constant
linkWidth: 0 takes the same path. Purely visual: the edges still drive the layout and the LOD
hierarchy, so links can be toggled back on without re-laying out.
linkWidth?
Section titled “linkWidth?”
optionallinkWidth?:LinkWidthSpec
Defined in: network/network.ts:281
Link width. A constant (default 1), a d3 scale of the edge weight — (weight) => width, e.g.
scaleSqrt().domain([0, maxWeight]).range([1, 6]) — or { by, scale } for parity with
nodeRadius (by is "weight"/"flow", the same per-edge quantity). A super-edge
applies the same scale to the accumulated weight of the edges it subsumes, so link thickness
reads as flow at every LOD level. Keep the scale’s range minimum ≥ 1 so links never vanish.
A constant 0 means “no links at all” and takes the linkStyle "none" skip path —
the link geometry is never built. A width scale that returns 0 for some weights does not: only
a literal constant is read as a global opt-out.
moduleColor?
Section titled “moduleColor?”
optionalmoduleColor?:ModuleColor
Defined in: network/network.ts:249
The app’s colour for a module, by its module path (#494): (modulePath) => cssColour | undefined, e.g.
@mapequation/c3’s hierarchy().colorOf. Whatever nodeFill is, a state network’s pie wedges and
both-view containers take it (else they keep the engine’s own colours); a nodeFill: { by: "module" }
without its own color takes it; and a state network with no nodeFill colours its nodes and discs by it
instead of the engine’s palette. A container, like a physical disc, takes its physical node’s dominant module:
the pie wedge holding most of its flow (a tie goes to the lower module). So nodes can be filled by flow or
metadata while the pies and containers keep the app’s module colours. Asked once per module per style() call — a later style({ moduleColor }) recolours — never per
frame; undefined (no colour for a module) takes the default fill.
nodeBorder?
Section titled “nodeBorder?”
optionalnodeBorder?:object
Defined in: network/network.ts:256
Node border (#104 rework): a ring of a fixed pixel width on every node and module. Without a
color, each ring is a darker shade of its own node’s fill (a module’s of its module colour), as a
flowBorder is (#506); with one (e.g. { width: 1, color: "#fff" }), every ring is that
colour. Independent of flowBorder (which encodes flow); flowBorder wins if both are set.
color?
Section titled “color?”
optionalcolor?:string
width:
number
nodeFill?
Section titled “nodeFill?”
optionalnodeFill?:NodeFillSpec
Defined in: network/network.ts:238
Node fill colour. A single CSS colour (default a medium blue), a per-node
(index, graph) => cssColour accessor — e.g. a categorical palette keyed by module, so a
planted hierarchy reads as colour (#104 rework; a collapsed module keeps its members’ mean colour) —
or { by, scale } to colour by a NodeMetric through a colour scale, like nodeRadius:
an LOD aggregate is then filled with scale of its summed metric, so a module reads as its total
flow (#445). Resolved once per call — no per-frame cost.
nodeRadius?
Section titled “nodeRadius?”
optionalnodeRadius?:NodeRadiusSpec
Defined in: network/network.ts:222
Node radius (world units). A constant number (default 4), a per-node Float32Array, a
(degree, index, graph) => radius accessor (a bare d3 scale fits — it receives the node’s
degree), or { by, scale } to size by a chosen metric ("degree" | "strength" | "flow" |
custom accessor) through any scale. Resolved once per call — no per-frame or rendering cost.
sizeMode?
Section titled “sizeMode?”
optionalsizeMode?:"world"|"screen"
Defined in: network/network.ts:301
"world" (default) — glyph sizes are in world units and scale with zoom. "screen" — sizes are
constant pixels regardless of zoom: the natural register for navigating a large layout (nodes
stay visible when zoomed out instead of going sub-pixel), and what LOD wants. nodeRadius /
linkWidth are then read as pixels. (Arrowheads stay world-sized for now, #103.)