خيارات العرض

Pivotick يسمح لك بتخصيص كيفية عرض العقد والحواف والتسميات من خلال الخيار render.

تحذير

تنطبق جميع الأنماط المحددة هنا فقط عند ضبط render.type على svg.

الخيار	اكتب	الافتراضي	الوصف
type	'svg' | 'canvas'	'svg'	طريقة التقديم. 'svg' يستخدم عناصر SVG، 'canvas' يستخدم لوحة HTML (تجريبية - لم يتم تنفيذها بالكامل).
renderNode	(node: Node) => HTMLElement | string | void	undefined	عارض مخصص للعقد.
renderLabel	(edge: Edge) => HTMLElement | string | void	undefined	عارض مخصص لتسميات الحافة.
defaultNodeStyle	NodeStyle	defaultNodeStyle	يتم تطبيق التصميم الافتراضي على كافة العقد.
defaultEdgeStyle	EdgeStyle	defaultEdgeStyle	يتم تطبيق التصميم الافتراضي على كافة الحواف.
defaultLabelStyle	LabelStyle	defaultLabelStyle	يتم تطبيق التصميم الافتراضي على جميع تسميات الحواف.
markerStyleMap	Record<string, MarkerStyle>	defaultMarkerStyle	أنماط مخصصة لعلامات الحافة ('arrow'، 'diamond'، إلخ). انظر MarkerStyle
nodeTypeAccessor	(node: Node) => string | undefined	undefined	وظيفة للوصول إلى نوع العقدة المستخدمة مع nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	أنواع عقدة الخرائط (من nodeTypeAccessor) إلى الأنماط.
edgeTypeAccessor	(edge: Edge) => string | undefined	undefined	النوع الحافة، يستخدم مع edgeStyleMap وكمفتاح طبقة.
edgeStyleMap	Record<string, Partial<EdgeStyle>>	undefined	خرائط أنواع الحواف (من edgeTypeAccessor) إلى الأنماط. انظر طبقات الحافة.
minZoom	number	0.1	الحد الأدنى لمستوى التكبير.
maxZoom	number	10	الحد الأقصى لمستوى التكبير.
minFitScale	number	undefined	أدنى تكبير مناسب يذهب إليه. يتم فتح رسم بياني كبير جدًا بحيث لا يمكن احتواؤه عند هذا التكبير/التصغير، ويتم توسيطه على fitAnchor، وتظهر الخريطة المصغرة الباقي.
fitAnchor	string	undefined	معرف العقدة المتوافقة موجود في minFitScale مراكز على. يتوقف العرض عند حواف الرسم البياني، لذا يظل المرساة على أحد الجوانب بالقرب من ذلك الجانب.
zoomEnabled	boolean	true	تمكين التكبير. false يستخدم أيضًا أزرار التكبير/التصغير الخاصة بسكة منفذ العرض، مع الحفاظ على الملاءمة والوسط.
selectionBox	SelectionBox	undefined	تحديد المنطقة: enabled: false يسقط شريط السحب ** و** أداة التحديد ▸ Lasso.
enableNodeExpansion	boolean	true	توسيع المجموعة: false يأخذ الشيفرون والاختصار Enter والمخطط التفصيلي المنهار المتقطع معه. لا يزال الطفل المختار يضيء مجموعته المغلقة.

نوع التقديم

نصيحة

Pivotick يمنحك تحكمًا مرنًا في العرض، بدءًا من الإعدادات الافتراضية البسيطة وحتى العرض المخصص بالكامل. وهنا المتهدمة سريعة:

• يتيح لك renderNode و**renderLabel** تخصيص كيفية رسم العقد والتسميات بشكل كامل (يمكنك إرجاع HTML أو نص).
• defaultNodeStyle.html (لكل عقدة أو لكل نوع) هي نفس فتحة الهروب داخل سلسلة التصميم - راجع HTML العقد.
• nodeTypeAccessor + nodeStyleMap تسمح بالتصميم الديناميكي بناءً على نوع كل عنصر.
• defaultNodeStyle، defaultEdgeStyle، و defaultLabelStyle تحدد المظهر الأساسي لجميع العناصر.
• edgeTypeAccessor + edgeStyleMap هي نظيرات الحافة، وهي مضاعفة كما المفتاح الذي يتم إيقاف تشغيل طبقة العلاقة به - راجع طبقات الحافة.

يتم قياس بطاقتك، مهما كان شكلها

Pivotick يقيس ما تعيده إلى حجمه <foreignObject> ولتغذية القوة نصف قطر الاصطدام للتخطيط. يتم قياس البطاقة داخل صندوق يتقلص ليناسب حجم البطاقة مكتبة خاصة بك، لذلك عليك ليس أن تجعل حجم الجذر الخاص بك ذاتيًا: width: 100% عليه يتم حلها وفقًا لمحتواها الخاص وليس ضد العنصر النائب.

تستخدم أمثلة العرض الثلاثة التالية البيانات التالية:

const data = {
    nodes: [
        { id: 1, data: { label: 'A', type: 'hub' } },
        { id: 2, data: { label: 'B', type: 'spoke' } }
    ],
    edges: [{ from: 1, to: 2 }]
}

التقديم الافتراضي

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'circle',
            color: '#007acc',
            size: 12,
            strokeColor: '#fff',
            strokeWidth: 2,
            fontFamily: 'system-ui',
            textColor: '#fff'
        },
        defaultEdgeStyle: {
            markerStart: (edge: Edge) => edge.getData().mstart,
            markerEnd: 'arrow',
            curveStyle: 'straight',
        },
    }
}

عرض خريطة الوصول

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            'hub': {
                shape: 'hexagon',
                color: '#f90',
                size: 25,
                text: (node) => node.getData()?.label
            },
            'spoke': {
                shape: 'triangle',
                color: '#09f'
            }
        },
    },
    UI: {
        mode: 'static'
    }
}

عرض رد الاتصال المخصص

const options = {
    render: {
        renderNode: (node: Node): HTMLElement | string | void => {
            const size = 12
            const color = '#09f'
            const style = [
                'display: block',
                `width: ${size}px`,
                `height: ${size}px`,
                `background-color: ${color}`,
                'border: 2px solid #fff',
                'border-radius: 50%',
                'opacity: 1',
            ].join(';')

            return `<span style="${style}"></span>`
        }
    }
}

مثال لعرض Map-Accessor

HTML العقد

عندما لا تكون هناك مجموعة من shape وcolor وicon وtext كافية، قم بتسليم العارض بعضًا العلامات. هناك طريقتان والفرق هو فقط حيث يتم التصريح:

	أعلن على	يصل
NodeStyle.html	defaultNodeStyle، nodeStyleMap[type]، النمط الخاص بالعقدة، إرجاع styleCb	نوع واحد، أو عقدة واحدة
render.renderNode	خيارات العارض	كل عقدة، قبل سلسلة التصميم

html هي التي يجب الوصول إليها أولاً: إنها قناة ذات أسلوب عادي، لذا فهي تحل من خلال نفس سلسلة الأسبقية مثل color أو shape، ويمكن إعطاء بطاقة لشخص واحد نوع العقدة بينما يحتفظ الباقي بأشكاله.

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            // A card, and nothing else: `shape: 'none'` is what makes it the whole node.
            service: {
                shape: 'none',
                html: (node) => {
                    const card = document.createElement('div')
                    card.className = 'my-service-card'
                    card.textContent = node.getData()?.name
                    return card
                },
            },
            // Same graph, ordinary shapes.
            host: { shape: 'circle', size: 18, color: '#0891b2' },
        },
    },
}

shape: 'none'

بدونها، يظل الشكل مرسومًا خلف بطاقتك، وsize هو الأصغر العقدة مسموح بها - وهو ما تريده للبطاقة الموجودة على قرص ملون، و ليس ما تريده للبطاقة التي هي العقدة. shape: 'none' لا يرسم الشكل، واليدين نصف قطر تصادم العقدة وتثبيت الحافة بالبطاقة بدلاً من ذلك.

إنها قيمة شكل مثل أي قيمة أخرى، لذا فهي تتكون: عقدة تسمية فقط shape: 'none' مع text وبدون بطاقة، والعقدة ذات الرمز فقط هي shape: 'none' مع iconClass. العقدة التي ليس لها شكل ولا تحتوي على أي محتوى على الإطلاق تكون غير مرئية، ولكنها لا تزال موجودة، لا يزال قابلاً للسحب، ولا يزال قابلاً للتحديد عبر 2 × size.

ما تفعله البطاقة لا يتم إيقاف تشغيله

text هي قناة منفصلة، لذلك يتم رسم البطاقة وتسمية العقدة معًا. إذا كانت بطاقتك يحمل عنوانًا خاصًا به، مجموعة text: '' — لا يمكن مسح القيمة الموروثة undefined، والذي يتوافق مع ما تقوله خريطة النمط.

التحجيم

يتم قياس بطاقتك وتنمو العقدة إليها، لذلك لا يتم قصها أبدًا، الاصطدام فرض المسافات بين البطاقات الحقيقية، وتهبط الحواف على حدود البطاقة بدلاً من أن تكون على شكل دائرة حوله. ليس عليك القيام بأي شيء لإنجاز هذا العمل — إرجاع width: 100% الجذر جيد، لأن القياس يتم داخل صندوق قابل للانكماش.

نتيجتان تستحقان المعرفة:

• القياس غير متزامن (لا يمكن قياس البطاقة قبل ظهورها على الشاشة)، لذا فإن نصف قطر العقدة هو size للإطار الأول أو الإطارين ثم يصبح البطاقة. يتم دفع التخطيط مرة واحدة عندما يهبط ذلك.
• يتم قياس البطاقة مرة واحدة، عند العرض. إذا تغير حجم محتواه لاحقًا من تلقاء نفسه، أعد عرض العقدة لإعادة قياسها.

تمشيط بعض العقد فقط

قد يُرجع كلا رد الاتصال لا شيء للعقدة، مما يعيد هذه العقدة إلى سلسلة التصميم - الشكل وإدخال خريطة النمط والأيقونات والتسمية كالمعتاد. لذلك عالمية واحدة renderNode يمكنه بطاقة العقد التي تستحق واحدة:

renderNode: (node) => node.getData()?.featured ? buildCard(node) : undefined

العلامات الموثوقة فقط

يتم إدراج كل ما تقوم بإعادته كما هو. قم ببنائه باستخدام textContent، أو اهرب منه – لا تفعل ذلك استيفاء بيانات العقدة في سلسلة ترميزية. راجع دليل الأمان.

تسميات العقدة الكاملة

يتم اختصار تسمية العقدة الأطول من الغرفة الموجودة بها بعلامة حذف متوسطة (Supe…abel). اضبط textTruncate: false لرسمه بالكامل بدلاً من ذلك — كإعداد افتراضي، لكل نوع عقدة، أو لكل عقدة:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: false },
    },
}

بين الاثنين، textMaxWidth يغطي التسمية بالعرض الذي تختاره، في وحدات الرسم البياني (CSS بكسل عند التكبير 1)، بدلاً من الغرفة التي توفرها لها العقدة. يتم رسم التسمية التي تناسبها بالكامل، ويتم تقصير الجزء الأطول بعلامة حذف متوسطة إلى هذا العرض:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: true, textMaxWidth: 160 },
    },
}

حجم خط التسمية

يتم رسم تسمية العقدة عند max(12, size × 0.45) افتراضيًا، بحيث تنمو مع العقدة. عندما تكون العقدة كبيرة بالنسبة لما ترسمه وليس لمدى أهميتها، مثل الصورة صورة مصغرة، اضبط textFontSize (وحدات الرسم البياني) لإبقاء التسمية متوافقة مع جيرانها:

const options = {
    render: {
        nodeStyleMap: {
            image: { size: 80, imagePath: (node) => node.getData()?.url, textFontSize: 12 },
        },
    },
}

لا يزال الملصق موجودًا بعيدًا عن العقدة، ولا تزال الميزانية المضمنة تأخذ عرضه منها العقدة (بحيث يتناسب الخط الأصغر مع عدد أكبر من الأحرف)، و بوابة التكبير تحكم عليها من خلال الحجم الذي تحدده.

يتم قياس الحد الأقصى مع التكبير/التصغير مثل بقية العقدة، ويمكن أن يكون وظيفة لـ عقدة. يتم تجاهله عندما يكون textTruncate هو false.

عادةً ما يمتد الملصق الكامل أو المغطى إلى ما بعد شكل العقدة، لذلك يتم رسمه عليه حبوب منع الحمل ذات الطابع الخاص كملصق عائم لتبقى قابلة للقراءة على القماش. إقرانها مع textVerticalShift: 1 (أو textHorizontalShift) لتحريك الملصق بالكامل بشكل واضح العقدة. لا يتم اقتطاع تسميات الحواف أبدًا.

text هي تسمية على العقدة، وليست بديلاً عن واحدة. العقدة التي is يجب أن يكون نصها مرسومة كعقدة، من خلال html، renderNode أو tier — تلك هي رسمات العقدة، ويحتفظ بها التكبير/التصغير مهما كان minLabelFontSize يفعل للتسميات.

شارات العقدة

بحلول الوقت الذي يصبح فيه الرسم البياني مفيدًا، تكون color وshape وsize وiconClass عادةً كل شيء يحمل شيئا. badges هي قناة خاصة بها — مؤشرات صغيرة مثبتة إلى حافة العقدة، دون إنفاق أي من الآخرين:

const options = {
    render: {
        defaultNodeStyle: {
            badges: (node) => {
                const { notes, disputed } = node.getData()
                return [
                    notes && { text: String(notes), color: '#2563eb', title: `${notes} notes` },
                    disputed && { iconClass: 'fa fa-exclamation', color: '#b94a48', title: 'Disputed' },
                ].filter(Boolean)
            },
        },
    },
}

أعط شارة text (عدد، أو حرف أو اثنين)، iconClass، iconUnicode أو svgIcon، وtitle لتلميح الأداة الأصلي. text يفوز إذا يمكنك توفير كليهما. النص الأطول يحول الشارة إلى قرص، وبعد ثلاثة الشخصيات التي تقدمها 99+.

أين يذهبون

حذف position والشارات تملأ الزوايا الحرة في اتجاه عقارب الساعة من 'ne'. اسم واحد ('ne' | 'nw' | 'se' | 'sw') ويتم تكريمه حرفيًا، بما في ذلك التداخلات.

أربعة تناسب عقدة عادية، اثنان على واحد مع الأطفال. التوسيع/الطي تقع السيطرة في الشمال الشرقي عندما تنهار العقدة وفي الجنوب الشرقي عندما تنهار موسعة، لذلك على أي عقدة قابلة للتوسيع كلاهما الزوايا الشرقية محجوزة - وإلا ستتغير كل شارة في الزاوية لحظة فتح المجموعة. شارات أبعد من ماذا تناسب الطي في +n الذي يسميها تلميح الأدوات.

يتم قياس الشارات بحيث تكون العقدة بين الأرضية والسقف، بحيث تظل مقروءة عقدة صغيرة دون انتفاخ على عقدة كبيرة، ويجلسون على الشكل الحقيقي حافة - زاوية مربع أو صورة مؤطرة، نقطة 45 درجة من الدائرة.

النقرات

تكون الشارة قابلة للاختبار ولكنها شفافة بشكل افتراضي: بدون معالج، يتم النقر عليها يسقط ويختار العقدة الموجودة أسفله، لذا فإن الشارة ليست أبدًا نقطة ميتة.

{ text: '3', onClick: (event, node, badge) => openNotes(node) }

أعط شارة onClick — أو أعلن callbacks.onBadgeClick عن سلوكهم الكل يشارك - ويأخذ مؤشر المؤشر ويستهلك نقرته، ويترك العقدة غير محددة. كلا النارين، الشارة خاصة أولاً. الضغط على شارة لا يزال يسحب العقدة في كلتا الحالتين، ويمكن للمستمع badgeClick الموجود في ناقل التفاعل ذلك cancel() كلاهما.

النطاق

تصف الشارات ** فقط العقدة التي تجلس عليها**. الكتلة المنهارة لا تجميع أطفالها - المشي node.children في وظيفة badges الخاصة بك إذا هذا هو ما تريده، لأنك أنت الوحيد الذي يعرف ما إذا كانت الحقيقة تفوز أم لا.

التفاصيل التي تتبع التكبير

الرسم الذي يُقرأ جيدًا عن قرب لا يمكن قراءته في نظرة عامة، والنقطة التي تناسب نظرة عامة لا يمكن أن أقول ما هو عليه. tiers يتيح لعقدة واحدة أن تحمل عدة رسومات واختيارات بينهما من حجم العرض الحالي للعقدة.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [
                // Small: a coloured dot.
                { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
                // Once there is room for it: a labelled chip.
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

يتم ترتيب المستويات الأصغر أولاً والأغنى الذي يناسبها يفوز. عندما لا يفعل أي شيء، ترسم العقدة نمطها الأساسي، وبالتالي فإن النمط الذي لديك بالفعل هو الأرضية: رسم بياني تعلن أن لا tiers لا يتأثر من جميع النواحي.

ما يرث الطبقة

يتم دمج الطبقة فوق النمط الأساسي، وبالتالي يتم توريث القناة التي لم يذكر اسمها. الرسم هو الاستثناء: iconUnicode، iconClass، svgIcon، imagePath وhtml عبارة عن فتحة واحدة، لذا فإن الطبقة التي تسمي أيًا منها تحل محل رسم القاعدة (وimageFit) تمامًا. لا يحتاج الحرف الرسومي الثابت مع طبقة البطاقة إلى أكثر من البطاقة:

const options = {
    render: {
        defaultNodeStyle: {
            svgIcon: buildGlyph,
            tiers: [
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

الطبقة التي لا تذكر أي رسم، فقط size أو color أو text مثلاً، تحافظ على الصورة الرمزية للقاعدة.

لإزالة قناة لا يحل المستوى محلها، اضبطها على null، مما يعني الطبقة ترسم ذلك لا على الإطلاق. strokeColor: null يسقط الخطوط العريضة للقاعدة، ل سبيل المثال. undefined لا يمكن أن يقف في: معناه "أنا لا أسمي هذه القناة"، أي بالضبط كيف تبقى قيمة القاعدة.

هذه هي الطبقة الوحيدة التي تعمل فيها null بهذه الطريقة. في كل مكان آخر في سلسلة الأناقة null لا يزال يسقط إلى الطبقة أدناه، لأن styleCb يعيد القيمة الفارغة مباشرة من بيانات العقدة هو شكل عادي ويعني دائمًا "استخدام الافتراضي".

لجعل العقدة عديمة الشكل، استخدم shape: 'none' بدلاً من مسح shape.

ما يختار الطبقة

الحجم المعروض: بصمة العقدة بـ CSS بكسل، وهي footprint × zoom. أ يتم إشراك الطبقة بمجرد وصولها إلى minRenderedSize، والذي يكون هو المستوى الافتراضي الخاص بالطبقة width، لذا فإن { width: 140 } يُقرأ كـ "تفاعل بمجرد توفر مساحة لرسم 140 بكسل من عقدة".

مقياس التكبير من تلقاء نفسه لن يكون كافيا. إنه يضاعف إحداثيات التخطيط الذي تم اختراعه، لذلك نفس المقياس يعني حجمًا ظاهريًا مختلفًا على رسم بياني مختلف، وضبط العتبة في مجموعة بيانات واحدة سيكون خاطئًا في المجموعة التالية.

الطبقة التي تم إشراكها في عمليات الحجز حتى ينخفض الحجم المعروض إلى 85% من الحد الخاص بها. كل تشترك العقدة في العتبة، لذلك بدون هذا النطاق، ستومض اللوحة القماشية المتوقفة على إحداها على شكل كله.

تبقى البصمة في مكانها

لا يتغير المربع الذي تحتفظ به العقدة في التخطيط عندما يتغير الرسم الخاص بها. إنه كذلك layoutSize، ويتم تعيينه افتراضيًا على نصف الطبقة المعلنة الأوسع، لذا فإن إعلان الطبقات يعطي الرسم البياني التباعد الصحيح دون رقم الثاني. لا شيء يتحرك عند تبديل الطبقة: يتغير الرسم داخل صندوق بالحجم الصحيح بالفعل، ولا ترى القوى أبدًا الفرق.

تم الإعلان عن width وheight بدلاً من قياسهما لنفس السبب. التخطيط لديه لمعرفة البصمة قبل العلامة الأولى، وتبلغ البطاقة المقاسة عن حجمها مرة واحدة فقط لقد تم رسمه.

اضبط layoutSize بنفسك لجعل مساحة الرسم البياني أضيق أو أوسع من الطبقة الأوسع. ملاحظة أن الطبقة يتم رسمها بحجم تصميمها فقط عندما يكون عرضها مساويًا للبصمة؛ أ الأضيق ينخرط بشكل متناسب في وقت مبكر ويتم رسمه بشكل أصغر نسبيًا. اعطها صريح minRenderedSize إذا كان ذلك مهمًا.

رسم التركيز

focusTier هو الرسم الذي تستخدمه العقدة أثناء تحريكها أو تحديدها بمفردها، مهما كان التكبير. هذا هو المكان الذي تقول فيه العقدة كل شيء عن نفسها، لذا لا تقرأ واحدة أبدًا يعني التكبير عليه.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [/* … */],
            focusTier: { shape: 'none', html: buildDetailCard },
        },
    },
}

يتم دمجها عبر نمط base للعقدة بدلاً من الطبقة النشطة، لذا فإن طبقة الشريحة shape أو html لا يمكن أن يتسرب إليه. يحمل حجمًا ثابتًا على الشاشة: الرسم يتم قياسها بشكل عكسي مقابل التكبير/التصغير، لذا فإن البطاقة مقاس 280 × 150 تكون 280 × 150 CSS بكسل مهما كانت بعيدة الرسم البياني هو. ولا تمس أبدًا هندسة العقدة، لذا تستمر الحواف في الهبوط على الطبقة تحت وتحوم لا يتحرك شيئا.

رسم التركيز يرتدي شارات العقدة على حافتها الخاصة، في نفس الوقت الحجم الذي يظهر على الشاشة مثل البطاقة. يتم إخفاء شارات العقدة الخاصة أثناء ظهورها، لذلك لا يتم رسم أي منها مرتين. أعط focusTier badges خاصًا بك لإظهار مجموعة مختلفة على البطاقة.

تتم ترقية العقدة المحددة من تلقاء نفسها فقط. سيكون اختيار المربع المكون من خمسين عقدة بمثابة جدار من البطاقات المتداخلة.

render.focusTierTrigger يقول عندما يشتعل: 'both' (الافتراضي)، 'hover'، 'selection' أو 'off'. يمكنك الوصول إلى 'off' عندما تقوم بتضمين نمط محدد مسبقًا لشخص ما آخر يشحن ويريد منع رسم التركيز الخاص به دون تحريره.

عندما تظهر الطبقة ذلك بالفعل

في بعض الأحيان يكون رسم التركيز هو نفسه أحد طبقات التكبير/التصغير: حرف رسومي في وضع السكون يحوم فوق الشريحة، مع رسم الشريحة أيضًا بمجرد تكبير الرسم البياني بدرجة كافية. هناك، سيؤدي التمرير إلى رسم شريحة ثانية أصغر حجمًا فوق الشريحة الموجودة بالفعل على الشاشة. focusTierYieldsAt يقوم بتسمية الفهرس في tiers الذي يتوقف رسم التركيز عن إطلاقه:

defaultNodeStyle: {
    tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
    focusTier: { shape: 'none', html: chipFor },
    focusTierYieldsAt: 0,
}

بينما يتم رسم العقدة على هذا المستوى أو على مستوى أكثر ثراءً، فإن التمرير واختيارًا وحيدًا يتركها كما هي إنه كذلك. فهو يتبع الطبقة النشطة، وليس مستوى التكبير/التصغير، لذا فهو يستخدم نفس العتبات مثل مبادلة. يؤدي التكبير مع فتح البطاقة إلى تلاشيها مع تلاشي الطبقة، والتصغير مرة أخرى يعيده دون تحريك المؤشر. اتركه بدون ضبط على العقدة التي يشير رسم التركيز إليها أكثر من أي طبقة، والعقدة التي لا تحتوي على tiers تتجاهلها.

لا تزال تلميحات الأدوات مشتعلة

لا تحل بطاقة التركيز محل تلميح الأداة. الاثنان مستقلان، وقد يكون هناك تلميح للأداة احمل شيئًا لا تحمله البطاقة.

المبادلة نفسها

تتلاشى العقدة من رسم إلى آخر بدلاً من قطعها. المنتهية ولايته يتم رسم الرسم على طبقة خاصة به ويتلاشى الاثنان مع بعضهما البعض، لذلك لا توجد عقدة أبدًا غائبة عن منتصف المبادلة، فقط لفترة وجيزة أكثر ليونة حيث تتداخل.

render.detailTransition هي المدة التي يستغرقها ذلك بالمللي ثانية. يتم تعيينه افتراضيًا على 160 و يغطي كل رسم يقرره التكبير/التصغير: تقاطع الطبقة، ورسم التركيز، والتسمية معبر minLabelFontSize. اضبطه على 0 لاستبدال الرسم برسم واحد الإطار:

const options = {
    render: {
        detailTransition: 0,
        defaultNodeStyle: { tiers: [/* … */] },
    },
}

تتقاطع كل عقدة على الشاشة في نفس اللحظة، لذلك يبدأ التقاطع بقدر ما يتلاشى هناك العقد المتغيرة. تم قياس الخبو على 210 عقدة تحمل كل منها بطاقة مقاس 140×44 بمعدل 60 إطارًا في الثانية لكامل طوله؛ ما يكلف حوالي 26 مللي ثانية على الإطار الواحد للمعبر ينفق بالفعل، وهذا الرقم لا ينمو مع المدة. قم بإيقاف تشغيله على الرسم البياني حيث يكون هذا الإطار أكثر أهمية من عملية الانتقال.

prefers-reduced-motion يطفئه من تلقاء نفسه مهما كان الخيار.

التسميات بحجم قابل للقراءة

تركب التسمية الرسم البياني وتتغير معه، لذا كلما زاد حجم العرض، أصبح أصغر رسمت. يتم فتح الرسم البياني بأي مقياس يختاره الملاءمة، ويقع هذا المقياس على أنه الرسم البياني ينمو: بعد بضع مئات من العقد، يكون الإطار الافتتاحي نصًا لا يمكن لأحد قراءته، ومرسومًا فوق الرسم البياني هو تسمية.

render.minLabelFontSize هو الحجم المعروض، بـ CSS بكسل، والذي لا يوجد أسفله ملصق مرسومة. الافتراضي هو 9.

const options = {
    render: {
        minLabelFontSize: 9,
    },
}

الاختبار هو fontSize × zoom بالبكسلات المعروضة بدلاً من مقياس التكبير/التصغير: مقياس تنسق الضربات التخطيط المبتكر، لذا فإن نفس القيمة تعني حجمًا ظاهريًا مختلفًا في مجموعة البيانات التالية

إنه رقم واحد للوحة القماشية بأكملها وتسميات الحواف وتسميات العقدة على حدٍ سواء. الفرق بينهما بالفعل في حجم الخط: يتم رسم تسمية الحافة defaultLabelStyle.fontSize (12 بشكل افتراضي)، بينما يتم اشتقاق العقدة من العقدة، max(12, size × 0.45)، لذا فإن العقدة الكبيرة تحافظ على تسميتها بتكبير أقل من العقدة الصغيرة. يستبدل نمط العقدة textFontSize هذا الحجم المشتق.

0 يغلق البوابة ويرسم كل تسمية عند كل تكبير.

ما يعتبر تسمية

النص الذي تضعه المكتبة: الحافة label والعقدة text وأي شيء آخر render.renderLabel عوائد. العقدة html، renderNode أو بطاقة المستوى هي الرسم، و tiers هو ما يختار بين الرسومات.

يتم الاحتفاظ بالتسمية التي يتم عرضها حتى ينخفض حجمها المعروض إلى 85% من الحد الأدنى، لذلك أ عرض متوقفة على الخط يستقر بدلا من الخفقان. كل تسمية مرسومة بحجم واحد تجيب معًا، أيًا كان العنصر الذي ينتمي إليه.

تُظهر الحافة المحددة من تلقاء نفسها الملصق الخاص بها مهما كان التكبير/التصغير، مع تغيير مقياسه بحيث يكون كذلك يمكن قراءتها بدلاً من البكسلتين التي كانت مخفية فيها. لا تحتوي الحافة على تلميح أدوات ولا لوحة، لذلك عنوانها هو الشيء الوحيد الذي يجيب على "ما هذا". العقدة لا تحتاج إلى أي من ذلك: إنها يجيب بالفعل من خلال تلميح الأدوات والشريط الجانبي والرسم focusTier.

التسمية المخفية ليست غير مرئية فحسب، بل ليست موجودة في الرسم البياني - حيث تذهب التكلفة. يتم تغيير موضع التسمية عند كل علامة محاكاة، وعلى رسم بياني كبير يمرر التكاليف بمفرده أكثر من إطار. وما يبقى بعد البوابة هو السكتة الدماغية وهي رخيصة الثمن.

ما لا يفعله

فوق هذا الحد، لا يزال من الممكن أن تتداخل التسميات مع بعضها البعض. عادة ما تكون تسمية الحافة أوسع من الحافة التي يسميها، ولا تتغير هذه النسبة مع التكبير/التصغير. هذا الخيار يدور حول الوضوح وليس التدهور.

واجهة برمجة التطبيقات

Pivotick يعرض وحدة تحكم العارض التي تتيح لك التفاعل مباشرة مع محرك العرض. جميع الطرق متوفرة على الإنترنت

الملاءمة والتكبير

Fit and center

graph.renderer.fitAndCenter()

Zomm in / out

graph.renderer.zoomIn()
graph.renderer.zoomOut()