JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

Line Data (JsonLine / RGLine)

Line describes directional relationships between nodes.

Like node data, line data has two forms:

  • JsonLine: input/config object.
  • RGLine: runtime object after being added to graph.

1. Core Model

A minimal line requires:

  • from: string source node id
  • to: string target node id

Typical line object:

const line = {
  id: 'line-a-b',
  from: 'a',
  to: 'b',
  text: 'A -> B'
};

2. Key Fields

Identity and Relationship

  • id?: string (recommended)
  • from: string
  • to: string
  • text?: string
  • type?: string
  • data?: Record<string, any>

Shape and Path

  • lineShape?: RGLineShape
  • fromJunctionPoint?: RGJunctionPoint
  • toJunctionPoint?: RGJunctionPoint
  • junctionOffset?: number
  • lineRadius?: number (for orthogonal corner roundness)
  • polyLineStartDistance?: number (for simple orthogonal)

Style and Label

  • color?: string
  • lineWidth?: number
  • opacity?: number
  • className?: string
  • fontColor?: string
  • fontSize?: number
  • textOffsetX?: number
  • textOffsetY?: number
  • placeText?: 'start' | 'center' | 'end'
  • textAnchor?: 'start' | 'middle' | 'end'

Arrow and Visual Effects

  • startMarkerId?: string
  • endMarkerId?: string
  • dashType?: number
  • animation?: number
  • useTextOnPath?: boolean

Behavior Flags

  • disablePointEvent?: boolean
  • selected?: boolean
  • hidden?: boolean
  • forDisplayOnly?: boolean

3. CRUD Operations

// Create
graphInstance.addLine({ from: 'a', to: 'b', text: 'A -> B' });
graphInstance.addLines([{ from: 'b', to: 'c' }]);

// Read
const line = graphInstance.getLineById('line-a-b');
const allLines = graphInstance.getLines();

// Update
graphInstance.updateLine('line-a-b', {
  color: '#60a5fa',
  lineWidth: 3,
  text: 'Updated'
});

// Delete
graphInstance.removeLineById('line-a-b');

4. Practical Example

const lines = [
  {
    id: 'l1',
    from: 'root',
    to: 'svc-a',
    text: 'request',
    lineShape: 2,
    color: '#3b82f6',
    endMarkerId: 'arrow-default',
    data: { weight: 0.8 }
  },
  {
    id: 'l2',
    from: 'root',
    to: 'svc-a',
    text: 'fallback',
    dashType: 2,
    opacity: 0.8,
    textOffsetY: -8
  }
];

graphInstance.addLines(lines);

5. Important Notes

  • Use from/to, not source/target.
  • Use text, not label.
  • hidden: true hides rendering but relation/layout logic may still consider line context depending on state calculation.
  • Multiple lines between the same node pair are supported and handled through runtime RGLink indexing.

6. Next Reading