Labels komen binnen terwijl u inzoomt

Een label volgt de grafiek, dus hoe verder het beeld zich bevindt, hoe kleiner het wordt geschilderd. Verleden een punt: het is niet langer tekst, maar alleen een grijze textuur over de grafiek. render.minLabelFontSize is de grootte, in gerenderde pixels, waaronder deze helemaal niet wordt getekend.

De onderstaande grafiek wordt geopend zonder een van de labels. Scroll naar binnen en de sitenamen verschijnen eerst, vervolgens de hostnamen en de randlabels.

Dingen die het waard zijn om te provoceren:

• Scroll langzaam naar binnen. De sitenamen verschijnen vóór de hostnamen. Het label van een knooppunt is afgeleid van de grootte, dus een site getekend op 40 heeft een label van 18 eenheden en een host getekend op 10 heeft de vloer van 12. Eén getal voor het hele canvas, en het verschil dat je wilt valt eruit de maten zijn er al.
• Parkeer de zoom op het punt waarop een label verschijnt en verplaats het. Een label dat wordt weergegeven, houdt vast totdat de weergegeven grootte daalt tot 85% van de drempelwaarde, zodat het beeld blijft hangen in plaats van flikkerend. Elk label in één maat beantwoordt samen.
• Selecteer een rand en scrol vervolgens weer naar buiten. Het label blijft behouden terwijl alle andere randen verdwijnen, op het scherm op een constante grootte gehouden in plaats van te krimpen met de grafiek. Een rand heeft nee tooltip en geen paneel, dus het label is het enige dat daarvoor verantwoordelijk is.
• Scrol naar de ene site en ga vervolgens naar een andere. Er wordt opnieuw een label gekozen voor wat er op staat scherm, zodat een site waar u voorbij bent gezoomd zijn naam krijgt wanneer u ernaar terugkeert in plaats van terwijl u ernaartoe zoomt het is uit het zicht.

Het uitschakelen

minLabelFontSize: 0 tekent elk label bij elke zoomlens, wat de bibliotheek voorheen deed de optie bestond.

Opties

const options = {
    render: {
        // The default. Below 9 rendered pixels a label is not drawn — and a node's label is
        // derived from its size, so the sites keep theirs to a lower zoom than the hosts.
        minLabelFontSize: 9,
        defaultNodeStyle: { shape: 'circle', textColor: '#ffffff' },
        defaultEdgeStyle: { strokeColor: '#cbd5e1', strokeWidth: 2 },
    },
    // Every node is pinned, so the layout is the one written above.
    simulation: { enabled: false },
}

Gegevens

/**
 * Seven sites — one in the middle, six around it — each with four hosts. Pinned wide enough
 * that the graph opens well under zoom 1, which is the point of the card, and dense enough in
 * the middle that scrolling in anywhere lands on something with a name.
 *
 * A site is drawn at size 40 and a host at 10, so their labels are 18 and 12 graph units: a
 * node's label is derived from its size, with a floor at 12.
 */
const SITES = [
    { id: 'core', name: 'Frankfurt', x: 0, y: 0, tone: '#2563eb' },
    { id: 'us', name: 'Ashburn', x: 1000, y: -560, tone: '#0891b2' },
    { id: 'sa', name: 'São Paulo', x: 1000, y: 560, tone: '#d97706' },
    { id: 'ap', name: 'Singapore', x: -1000, y: 560, tone: '#7c3aed' },
    { id: 'uk', name: 'London', x: -1000, y: -560, tone: '#059669' },
    { id: 'no', name: 'Oslo', x: 0, y: -900, tone: '#db2777' },
    { id: 'za', name: 'Cape Town', x: 0, y: 900, tone: '#65a30d' },
]

const HOSTS = [
    { name: 'edge', relation: 'routes to' },
    { name: 'cache', relation: 'caches for' },
    { name: 'api', relation: 'serves' },
    { name: 'db', relation: 'reads from' },
]

const nodes = []
const edges = []

for (const site of SITES) {
    nodes.push({
        id: site.id,
        fx: site.x,
        fy: site.y,
        style: { size: 40, color: site.tone, text: site.name, textVerticalShift: 1 },
    })
    HOSTS.forEach((host, index) => {
        const angle = (index / HOSTS.length) * Math.PI * 2 + Math.PI / 4
        const id = `${site.id}-${host.name}`
        nodes.push({
            id,
            fx: site.x + Math.cos(angle) * 250,
            fy: site.y + Math.sin(angle) * 230,
            style: { size: 10, color: '#94a3b8', text: `${host.name}.${site.id}`, textVerticalShift: 1 },
        })
        edges.push({ from: site.id, to: id, data: { label: host.relation } })
    })
}

// Every outer site peers with the middle one, so this is one network rather than seven.
for (const site of SITES.slice(1)) {
    edges.push({ from: 'core', to: site.id, data: { label: 'peers with' } })
}

const data = { nodes, edges }

Zie Rendering → Labels op een leesbaar formaat voor het contract, en Detail die volgt op de zoom voor de knooppunthelft van hetzelfde idee.