Kantenetiketten

Geben Sie einer Kante eine label in ihren Daten und Pivotick rendert sie auf der Linie. Gestalten Sie alle Etiketten gleichzeitig mit defaultLabelStyle (Schriftart, Farbe, Hintergrund). Drehen Sie rotateLabel auf true, damit jedes Etikett dem Winkel seiner Kante folgt. Für die vollständige Kontrolle können Sie mit render.renderLabel(edge) ein beliebiges HTML zurückgeben – dieselbe Notluke wie renderNode.

Optionen

const options = {
    render: {
        defaultEdgeStyle: {
            strokeColor: '#cbd5e1',
            strokeWidth: 1.5,
            rotateLabel: false, // default; overridden per edge above to show both
            markerEnd: 'arrow'
        },
        // Styling shared by every built-in edge label.
        defaultLabelStyle: {
            fontSize: 11,
            color: '#0f172a',
            backgroundColor: '#f8fafcdd'
        },
        defaultNodeStyle: {
            size: 12,
            color: '#6366f1',
            strokeColor: '#ffffff',
            textColor: '#334155',
            text: (node) => node.getData()?.label,
            textVerticalShift: -1.7
        }
    }
}

Daten

const data = {
    nodes: [
        { id: 'cto', data: { label: 'CTO' } },
        { id: 'lead', data: { label: 'Lead' } },
        { id: 'dev1', data: { label: 'Dev' } },
        { id: 'dev2', data: { label: 'Dev' } },
        { id: 'design', data: { label: 'Design' } }
    ],
    edges: [
        // rotateLabel can be set per edge: true rotates the label to follow the
        // edge's angle, false keeps it upright. Both are shown here.
        { from: 'lead', to: 'cto', data: { label: 'rotates with edge' }, style: { edge: { rotateLabel: true } } },
        { from: 'dev1', to: 'lead', data: { label: 'reports to' } },
        { from: 'dev2', to: 'lead', data: { label: 'reports to' } },
        { from: 'design', to: 'lead', data: { label: 'stays upright' }, style: { edge: { rotateLabel: false } } }
    ]
}