Les étiquettes arrivent lorsque vous zoomez

Une étiquette chevauche le graphique, de sorte que plus la vue est éloignée, plus elle est peinte. Au-delà d'un point, ce n'est plus du texte, juste une texture grise sur le graphique. render.minLabelFontSize est la taille, en pixels rendus, en dessous de laquelle il n'est pas dessiné du tout.

Le graphique ci-dessous s'ouvre sans aucune de ses étiquettes. Faites défiler et les noms de sites apparaissent en premier, puis les noms d'hôtes et les étiquettes de bord.

Choses qui valent la peine d'être provoquées :

• Faites défiler lentement. Les noms de sites arrivent avant les noms d'hôtes. L'étiquette d'un nœud est dérivée de sa taille, donc un site dessiné à 40 a une étiquette de 18 unités et un hôte dessiné à 10 a le plancher de 12. Un nombre pour l'ensemble du canevas, et la différence souhaitée dépend des tailles déjà présentes.
• Garez le zoom sur le point où une étiquette apparaît et déplacez-la. Une étiquette qui s'affiche tient jusqu'à ce que sa taille de rendu tombe à 85 % du seuil, de sorte que l'image se stabilise au lieu de scintiller. Chaque étiquette de taille unique répond ensemble.
• Sélectionnez un bord, puis faites défiler vers l'arrière. Il conserve son étiquette pendant que tous les autres disparaissent, maintenus à une taille constante à l'écran plutôt que de rétrécir avec le graphique. Un bord n'a ni info-bulle ni panneau, donc son étiquette est la seule chose qui en répond.
• Faites défiler vers l'avant sur un site, puis effectuez un panoramique vers un autre. Une étiquette est sélectionnée à nouveau en fonction de ce qui est à l'écran, de sorte qu'un site sur lequel vous avez zoomé obtient son nom lorsque vous y revenez plutôt que lorsqu'il est hors de vue.

L'éteindre

minLabelFontSize: 0 dessine chaque étiquette à chaque zoom, ce que faisait la bibliothèque avant que l'option n'existe.

Options

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 },
}

Données

/**
 * 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 }

Voir Rendu → Étiquettes à une taille lisible pour le contrat, et Détail qui suit le zoom pour la moitié du nœud de la même idée.