This example builds a read-only people relationship map where node clicks highlight connected lines, line clicks isolate the selected relation's endpoints, and canvas clicks restore the baseline styles. It is a focused reference for reversible interaction-driven graph styling with portrait node slots, saved original styles, and a force layout that settles before inspection begins.

Node and Line Click Highlighting on a People Relationship Map

What This Example Builds

This example builds a read-only people relationship map on a full-height canvas. Each person appears as a circular portrait with a color-coded name label, and the graph starts in a force layout before settling into a stable inspection view.

The main behavior is click-driven emphasis. Clicking a node highlights every connected relation in red. Clicking a line highlights that line, dims unrelated nodes,