تصل التصنيفات أثناء التكبير

يوجد ملصق على الرسم البياني، لذا كلما كان العرض بعيدًا، كلما كان رسمه أصغر. الماضي أ أشير إلى أنه لم يعد نصًا، بل مجرد نسيج رمادي فوق الرسم البياني. 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 }

راجع العرض → التسميات بحجم قابل للقراءة للاطلاع على العقد، و التفاصيل التي تتبع التكبير لنصف العقدة من نفس الفكرة.