Las etiquetas llegan a medida que haces zoom

Una etiqueta recorre el gráfico, por lo que cuanto más alejada está la vista, más pequeña se pinta. pasado un punto, ya no es texto, solo una textura gris sobre el gráfico. render.minLabelFontSize es el tamaño, en píxeles renderizados, por debajo del cual no se dibuja en absoluto.

El siguiente gráfico se abre sin ninguna de sus etiquetas. Desplácese y los nombres de los sitios aparecen primero, luego los nombres de host y las etiquetas de borde.

Cosas que vale la pena provocar:

Desplácese lentamente. Los nombres de los sitios llegan antes que los nombres de los hosts. La etiqueta de un nodo es derivado de su tamaño, por lo que un sitio dibujado en 40 tiene una etiqueta de 18 unidades y un host dibujado en 10 tiene el piso de 12. Un número para todo el lienzo, y la diferencia que deseas desaparece Los tamaños que ya están allí.
Estacione el zoom en el punto donde aparece una etiqueta y empújela. Una etiqueta que se muestra se mantiene hasta que su tamaño renderizado caiga al 85% del umbral, por lo que la imagen se estabiliza en lugar de parpadeando. Cada etiqueta de un tamaño responde juntas.
Seleccione un borde, luego desplácese hacia afuera. Mantiene su etiqueta mientras todos los demás van, se mantiene en un tamaño constante en la pantalla en lugar de reducirse con el gráfico. Un borde no tiene información sobre herramientas y sin panel, por lo que su etiqueta es lo único que responde.
Desplácese por un sitio y luego vaya a otro. Se vuelve a seleccionar una etiqueta para lo que está en pantalla, por lo que un sitio que pasó por alto obtiene su nombre cuando regresa a él en lugar de mientras está fuera de la vista.

Apagándolo

minLabelFontSize: 0 dibuja cada etiqueta en cada zoom, que es lo que hacía antes la biblioteca la opción existía.

OpcionesDatos

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

/**
 * 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 Renderizado → Etiquetas en un tamaño legible para el contrato, y Detalle que sigue al zoom para la mitad del nodo de la misma idea.

Las etiquetas llegan a medida que haces zoom ​

Las etiquetas llegan a medida que haces zoom