ズームインするとラベルが表示されます

ラベルはグラフ上にあるため、ビューの外側に行くほどラベルが小さく描画されます。過去ポイントは、もはやテキストではなく、グラフ上の灰色のテクスチャだけです。 render.minLabelFontSizeはレンダリングされたピクセル単位のサイズ。このサイズを下回るとまったく描画されなくなります。

以下のグラフは、ラベルが何も表示されていない状態で開きます。スクロールインするとサイト名が最初に表示されます。次にホスト名とエッジラベルです。

挑発する価値のあるもの:

ゆっくりスクロールしてください。 サイト名はホスト名よりも前に表示されます。ノードのラベルはサイズから導出されるため、40 で描画されたサイトには 18 ユニットのラベルがあり、10 で描画されたホストには 12 の床。キャンバス全体に 1 つの数字が表示され、必要な差がそこから抜け落ちます。サイズはすでにあります。
ラベルが表示されるポイントでズームを停止し、微調整します。 表示されているラベルは保留されます。レンダリングされるサイズがしきい値の 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 }

規約についてはレンダリング→読み取り可能なサイズのラベルを参照してください。ノード半分のズームに続く詳細同じ考えです。

ズームインするとラベルが表示されます ​

ズームインするとラベルが表示されます