As etiquetas chegam conforme você aumenta o zoom

Um rótulo percorre o gráfico, portanto, quanto mais longe estiver a visualização, menor ela será pintada. Passado um ponto, não é mais texto, apenas uma textura cinza sobre o gráfico. render.minLabelFontSize é o tamanho, em pixels renderizados, abaixo do qual não é desenhado.

O gráfico abaixo abre sem nenhum de seus rótulos. Role para dentro e os nomes dos sites aparecem primeiro, depois os nomes dos hosts e os rótulos das bordas.

Coisas que vale a pena provocar:

• Role lentamente. Os nomes dos sites chegam antes dos nomes dos hosts. O rótulo de um nó é derivado de seu tamanho, portanto, um site desenhado em 40 tem um rótulo de 18 unidades e um host desenhado em 10 tem o mínimo de 12. Um número para toda a tela, e a diferença que você deseja depende dos tamanhos já existentes.
• Estacione o zoom no ponto em que um rótulo aparece e mova-o. Um rótulo que está sendo exibido é mantido até que seu tamanho renderizado caia para 85% do limite, para que a imagem se estabilize em vez de piscar. Cada etiqueta de tamanho único responde junto.
• Selecione uma borda e role para trás. Ele mantém seu rótulo enquanto todos os outros vão, mantidos em um tamanho constante na tela, em vez de diminuir com o gráfico. Uma aresta não tem dica de ferramenta nem painel, então seu rótulo é a única coisa que responde por ela.
• Role para um site e depois desloque para outro. Um rótulo é escolhido novamente para o que está na tela, então um site que você passou pelo zoom recebe seu nome quando você volta para ele, em vez de enquanto ele está fora de vista.

Desligando

minLabelFontSize: 0 desenha todos os rótulos em cada zoom, que é o que a biblioteca fazia antes de a opção existir.

Opções

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

Dados

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

Consulte Renderização → Etiquetas em tamanho legível para o contrato e Detalhe que segue o zoom para a metade do nó da mesma ideia.