Skip to content

Node Padding

nodePadding resolves per node, so a single wide gap can separate groups within a column while every other gap stays at the default (see Usage for how the requested pixel value relates to what actually renders). Adjacent gaps collapse like CSS margins — max(prevNode.after, nextNode.before) — rather than summing, so only one side needs to grow. The same grouping could come from a function instead of a keyed object, if which nodes belong together has to be worked out from the data rather than known up front.

By default (nodePaddingMode: 'auto'), a node also has to clear every node stacked above it in the columns feeding into it, so it stays aligned with the flows arriving from the left. That requirement doesn’t show up above, where the middle column has only one node — nothing to misalign it with. It shows up once a column narrows: below, four sources feed two middle nodes, and Renewables ends up with a gap several times the requested padding, because it has to clear all four sources’ worth of space, not just the one real neighbor (Thermal) stacked above it in its own column. nodePaddingMode: 'even' gives every gap in a column the same size instead, but nodes are no longer aligned with the flows feeding them, so those flows bend more to reach their target. Drag nodePadding to see both modes respond to the same requested gap:

auto and even only diverge like this when some column has a node that must clear more than one node stacked in an earlier column. The first example on this page never hits that case — its middle column has just one node, with nothing above it to clear — so auto and even would render it identically.