An interactive, high-performance network and relationship graph visualization component for MemberJunction and Angular applications.
force (organic cluster network) and circular topology.BeforeNodeSelect, BeforeEdgeSelect, BeforeHopExpand, BeforeLayoutChange).NodeNavigated) so the host opens the record.import { GraphViewComponent } from '@memberjunction/ng-graph-view';
@Component({
standalone: true,
imports: [GraphViewComponent],
template: `
<mj-graph-view
[Nodes]="graphNodes"
[Edges]="graphEdges"
[LayoutMode]="'force'"
(NodeSelected)="onNodeSelected($event)">
</mj-graph-view>
`
})
export class MyFeatureComponent {
public graphNodes: GraphNode[] = [...];
public graphEdges: GraphEdge[] = [...];
public onNodeSelected(event: NodeSelectedEventArgs): void {
console.log('Selected node:', event.Node.Label);
}
}
| Property | Type | Default | Description |
|---|---|---|---|
Nodes |
GraphNode[] |
[] |
Array of graph node entities to render. |
Edges |
GraphEdge[] |
[] |
Array of relationship edges connecting nodes. |
LayoutMode |
'force' | 'circular' |
'force' |
Active layout algorithm. |
MaxHopDistance |
number |
2 |
Max hop depth for neighborhood traversals. |
SelectedNodeId |
string |
undefined |
ID of the node to initially select/highlight. |
ShowToolbar |
boolean |
true |
Show floating controls toolbar. |
ShowLegend |
boolean |
true |
Show category color legend. |
ShowInspector |
boolean |
true |
Show slide-in selected node inspector drawer. |
Searchable |
boolean |
true |
Enable keyword search input in toolbar. |
Physics |
GraphPhysicsConfig |
DEFAULT |
Physics parameters (repulsion, linkDistance, damping). |
| Event | Payload Type | Cancelable | Description |
|---|---|---|---|
BeforeNodeSelect |
BeforeNodeSelectEventArgs |
✅ Yes | Fired before a node is selected. Set event.Cancel = true to abort. |
NodeSelected |
NodeSelectedEventArgs |
❌ No | Fired after node selection completes. |
BeforeEdgeSelect |
BeforeEdgeSelectEventArgs |
✅ Yes | Fired before an edge relationship is selected. |
EdgeSelected |
EdgeSelectedEventArgs |
❌ No | Fired after edge selection completes. |
BeforeHopExpand |
BeforeHopExpandEventArgs |
✅ Yes | Fired before expanding neighbors for incremental data loading. |
HopExpanded |
HopExpandedEventArgs |
❌ No | Fired after hop expansion executes. |
BeforeLayoutChange |
BeforeLayoutChangeEventArgs |
✅ Yes | Fired before layout mode changes. |
LayoutChanged |
LayoutChangedEventArgs |
❌ No | Fired after layout algorithm recalculates. |
BeforeNodeNavigate |
BeforeNodeNavigateEventArgs |
✅ Yes | Fired before opening full entity record form. |
NodeNavigated |
NodeNavigatedEventArgs |
❌ No | Fired after the user asks to open a record. The host owns navigation. |
Call these directly via @ViewChild(GraphViewComponent):
ZoomIn() / ZoomOut(): Step viewport scale in or out.FitToView(): Reset zoom and center the network graph.Rearrange(): Re-seed positions and re-run physics relaxation.SetLayoutMode(mode): Change between 'force' and 'circular'.SelectNode(id): Select a node programmatically.ClearSelection(): Deselect currently active node or edge.ExpandHops(nodeId, depth): Request incremental neighbor loading.