当您放大时标签就会出现

标签位于图表上，因此视图越远，绘制的就越小。过了某个点，它就不再是文本，而是图表上的灰色纹理。 render.minLabelFontSize 是渲染像素的大小，低于该大小则根本不绘制。

下图打开时没有任何标签。滚动后，首先出现站点名称，然后是主机名和边缘标签。

值得挑衅的事情：

缓慢滚动。 站点名称先于主机名到达。节点的标签是根据其大小得出的，因此以 40 绘制的站点具有 18 个单位的标签，而以 10 绘制的主机的下限为 12。整个画布的一个数字，您想要的差异超出了已有的尺寸。
将缩放停留在标签出现的点上并轻推它。正在显示的标签会一直保持，直到其渲染大小降至阈值的 85%，因此图片会稳定下来而不是闪烁。每个尺寸相同的标签都会一起回答。
选择一条边，然后向外滚动。当其他边缘移动时，它会保留其标签，并在屏幕上保持恒定大小，而不是随图形缩小。边缘没有工具提示，也没有面板，因此它的标签是唯一可以回答它的东西。
在一个网站上滚动，然后平移到另一个网站。 会根据屏幕上的内容重新选择标签，因此您放大过的网站会在您平移回该网站时获得其名称，而不是在它看不见时。

将其关闭

minLabelFontSize: 0 在每次缩放时绘制每个标签，这是该选项存在之前库所做的事情。

选项数据

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 }

有关具体规则，请参阅渲染 → 保持标签可读；有关同一思路在节点上的应用，请参阅随缩放变化的细节。

当您放大时标签就会出现 ​

当您放大时标签就会出现