Aangepast HTML knooppunt

Als geen combinatie van shape, color, icon en text voldoende is, geef dan de renderer wat opmaak. html is een gewoon stijlkanaal, dus een kaart wordt opgelost via dezelfde voorrangsketen zoals elke andere — wat betekent dat een kaart iets is dat je aan één soort geeft knooppunt, niet op de hele grafiek.

Elk knooppunt hieronder komt uit één nodeStyleMap:

Knooppunt	Aangegeven als	Wat je krijgt
de drie teamkaarten	`shape: 'none'` + `html`	de kaart is het knooppunt — er zit geen vorm achter, en de gemeten doos bepaalt de lay-out en de randen
Op afroep	`shape: 'circle'` + `html`	de schijf is nog steeds getekend en `size` is nog steeds de vloer: een pil die op een vorm rijdt
`staging` · `prod`	nee `html`	gewone zeshoeken, van dezelfde kaart
Q3 bevriezen	`shape: 'none'`, nee `html`	een kaal label: niets getekend behalve de tekst, nog steeds versleepbaar en selecteerbaar
Bewerkingen	de eigen `style.html` van het knooppunt	één knooppunt overschrijft de kaart van zijn type
Techniek	`render.renderNode`	een globale callback die only dit knooppunt kaart en niets retourneert voor de rest

Vier dingen die de moeite waard zijn om te provoceren:

Klik op een kaart. Deze wordt gemarkeerd zoals elk ander knooppunt. Een kaart-only knooppunt houdt een onzichtbaar vak eronder precies zodat de geselecteerde en zwevende looks iets hebben om op te landen - zonder één had een aangepast knooppunt helemaal geen geselecteerde status.
Sleep de kaarten rond. De kracht van de botsing is de afstand tussen de echte kaartvakken, en de randen stoppen bij de rand van elke kaart in plaats van op een cirkel eromheen. Niets over de lay-out moest daarop afgestemd worden.
Vergelijk Operations met On call. Beide zijn html. Slechts één heeft een vorm erachter, en dat is het geheel van wat shape: 'none' doet.
Kijk naar de opmaak Operations'. De wortel ervan is width: 100% — de vorm die vroeger vouw het op de plaatsaanduidingsdoos en klem het vast. Kaarten worden gemeten in een krimp-tot-pasvorm box, dus het wordt opgelost tegen zijn eigen inhoud en u hoeft niets te doen.

Alleen vertrouwde markeringen

Wat u ook retourneert, wordt ingevoegd zoals het is, dus deze kaarten zijn eerder met textContent gebouwd dan door knooppuntgegevens te interpoleren in een opmaaktekenreeks. Zie Beveiliging.

OptiesGegevens

/** A team card. Built with `textContent`, never by interpolating data into markup. */
function teamCard(node) {
    const d = node.getData()
    const card = document.createElement('div')
    card.setAttribute('style', [
        'display: flex',
        'align-items: center',
        'gap: 8px',
        'padding: 8px 12px',
        'border-radius: 12px',
        'background: #ffffff',
        `border: 2px solid ${d.tone}`,
        'box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18)',
        'font-family: system-ui, sans-serif',
        'white-space: nowrap',
    ].join(';'))

    const emoji = document.createElement('span')
    emoji.style.fontSize = '20px'
    emoji.textContent = d.emoji

    const stack = document.createElement('span')
    stack.setAttribute('style', 'display: flex; flex-direction: column; line-height: 1.2')
    const title = document.createElement('strong')
    title.setAttribute('style', 'font-size: 13px; color: #0f172a')
    title.textContent = d.name
    const lead = document.createElement('span')
    lead.setAttribute('style', `font-size: 11px; color: ${d.tone}`)
    lead.textContent = d.lead
    stack.append(title, lead)

    card.append(emoji, stack)
    return card
}

/** A small pill, drawn on top of the shape it is given rather than replacing it. */
function rotaPill(node) {
    const pill = document.createElement('div')
    pill.setAttribute('style', [
        'display: inline-flex',
        'padding: 2px 8px',
        'border-radius: 999px',
        'background: #0f172a',
        'color: #fff',
        'font: 600 10px system-ui, sans-serif',
        'white-space: nowrap',
    ].join(';'))
    pill.textContent = node.getData().lead
    return pill
}

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            // A card and nothing else. `shape: 'none'` is what makes it the whole node:
            // no disc behind it, and the node's radius and edge anchors come from the
            // measured card instead of from `size`.
            team: {
                shape: 'none',
                html: teamCard,
                // The card carries its own title, so switch the SVG label off. `undefined`
                // would fall through to whatever the chain said; `''` is how you clear it.
                text: '',
            },
            // The other way round: the shape is still drawn, and `size` is still the
            // smallest the node may be, so the pill rides on a coloured disc.
            rota: {
                shape: 'circle',
                size: 30,
                color: '#f59e0b',
                html: rotaPill,
                text: (node) => node.getData()?.name,
                textVerticalShift: -1.5,
            },
            // No card at all — ordinary shapes, from the same style map.
            env: {
                shape: 'hexagon',
                size: 22,
                color: '#16a34a',
                text: (node) => node.getData()?.name,
                textVerticalShift: -1.4,
            },
            // Shapeless with no card either: a label floating on the canvas. Still
            // draggable and selectable, over `2 × size`.
            milestone: {
                shape: 'none',
                size: 26,
                text: (node) => node.getData()?.name,
                // Nothing behind it to shorten against, so draw it whole.
                textTruncate: false,
            },
        },
        // A global callback can card *some* nodes now: returning nothing hands the node
        // back to the chain above, so everything else is styled as usual. Here it draws
        // the badge on whichever team owns the release.
        renderNode: (node) => {
            if (node.id !== 'eng') return undefined
            const card = teamCard(node)
            card.style.borderWidth = '3px'
            const flag = document.createElement('span')
            flag.setAttribute('style', [
                'margin-left: 8px',
                'padding: 2px 6px',
                'border-radius: 6px',
                'background: #fee2e2',
                'color: #b91c1c',
                'font: 700 10px system-ui, sans-serif',
            ].join(';'))
            flag.textContent = 'RELEASE OWNER'
            card.append(flag)
            return card
        },
        defaultEdgeStyle: { markerEnd: 'arrow', strokeWidth: 1.5 },
    },
    simulation: {
        d3LinkDistance: 110,
        d3ManyBodyStrength: -700,
        d3CollideRadiusMultiplier: 1.15,
    },
    UI: {
        mode: 'full',
        minimap: false,
        table: false,
        // This card is about the nodes, so nothing else competes for the canvas.
        legend: false,
    },
}

const data = {
    nodes: [
        // Cards, from a `nodeStyleMap` entry.
        { id: 'design', data: { kind: 'team', name: 'Design', lead: 'Lena', emoji: '🎨', tone: '#8b5cf6' } },
        { id: 'eng', data: { kind: 'team', name: 'Engineering', lead: 'Raj', emoji: '⚙️', tone: '#2563eb' } },
        { id: 'data', data: { kind: 'team', name: 'Data', lead: 'Omar', emoji: '📊', tone: '#0891b2' } },
        // A card on a shape: the disc is still drawn behind it.
        { id: 'oncall', data: { kind: 'rota', name: 'On call', lead: 'Maya' } },
        // Plain shapes, from the same style map.
        { id: 'staging', data: { kind: 'env', name: 'staging' } },
        { id: 'prod', data: { kind: 'env', name: 'prod' } },
        // A label and no shape at all.
        { id: 'q3', data: { kind: 'milestone', name: 'Q3 freeze' } },
        // One node overriding its type's card with its own.
        {
            id: 'ops', data: { kind: 'team', name: 'Operations', lead: 'Theo', emoji: '🧭', tone: '#ea580c' },
            style: {
                shape: 'none',
                html: (node) => {
                    const d = node.getData()
                    const card = document.createElement('div')
                    // `width: 100%` and it still measures its content: the card is
                    // measured inside a shrink-to-fit box, not the placeholder.
                    card.setAttribute('style', [
                        'display: flex',
                        'align-items: center',
                        'gap: 8px',
                        'width: 100%',
                        'padding: 10px 14px',
                        'border-radius: 999px',
                        `background: ${d.tone}`,
                        'color: #fff',
                        'font: 600 13px system-ui, sans-serif',
                        'white-space: nowrap',
                    ].join(';'))
                    card.textContent = `${d.emoji} ${d.name} — always on`
                    return card
                },
            },
        },
    ],
    edges: [
        { from: 'design', to: 'eng' },
        { from: 'eng', to: 'data' },
        { from: 'ops', to: 'eng' },
        { from: 'oncall', to: 'ops' },
        { from: 'eng', to: 'staging' },
        { from: 'staging', to: 'prod' },
        { from: 'q3', to: 'prod' },
        { from: 'data', to: 'prod' },
        { from: 'design', to: 'ops' },
    ],
}

Zie Rendering → HTML knooppunten voor het volledige contract — wanneer de kaart gemeten, wat een kaart doet niet uitschakelen, en slechts enkele knooppunten kaarden.

Aangepast HTML knooppunt ​

Aangepast HTML knooppunt