طبقات الحافة

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

1. اسم النوع — render.edgeTypeAccessor.
2. صممه بشكل منفصل — render.edgeStyleMap.
3. أوقف تشغيله — UI.filter.edgeFacets، ظهر كمفتاح تبديل مباشر في لوحة الترشيح، وبشكل اختياري، على هيئة قسم وسيلة الإيضاح.

const options = {
    render: {
        edgeTypeAccessor: (edge) => edge.getData()?.kind,
        edgeStyleMap: {
            reference:   { strokeColor: '#428bca' },
            correlation: { strokeColor: '#888888', dashed: true, animateDash: false },
            sighting:    { strokeColor: '#f39a1f', dashed: true, markerEnd: 'circle' },
        },
    },
    UI: {
        filter: { edgeFacets: [{ key: 'kind', label: 'Relationship' }] },
    },
}

لا يؤدي إيقاف تشغيل الطبقة إلى تحريك الرسم البياني أبدًا

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

تسمية وتصميم نوع ما

edgeTypeAccessor و edgeStyleMap مرآة nodeTypeAccessor / nodeStyleMap بالضبط : ال يقوم الملحق بإرجاع سلسلة (أو undefined)، وتقوم الخريطة بتحويل تلك السلسلة إلى ملف Partial<EdgeStyle> تم دمجها على نمط الحافة الافتراضي.

render: {
    edgeTypeAccessor: (edge) => edge.getData()?.kind,
    edgeStyleMap: {
        reference: { strokeColor: '#428bca', strokeWidth: 2 },
        contains:  { strokeColor: '#5cb85c', markerEnd: 'diamond' },
    },
}

كل خاصية EdgeStyle هي لعبة عادلة — strokeColor، strokeWidth، opacity، curveStyle، dashed، animateDash، markerEnd، markerStart، rotateLabel. تقوم الحافة dashed بتحريك شرطةها بشكل افتراضي؛ مجموعة animateDash: false لنوع يجب أن يُقرأ على أنه سياق خلفية هادئ.

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

الأسبقية

نفس ترتيب العقد، والأضيق يفوز:

الأولوية	أين
1 (فوز)	الحافة الخاصة style.styleCb — انظر التحذير أدناه
2	خصائص الحافة الثابتة style
3	render.edgeStyleMap[kind]
4	render.defaultEdgeStyle.styleCb
5	render.defaultEdgeStyle حرفية

الدوران styleCb ليسا نفس الشيء، ومن الجدير الاحتفاظ بهما مستقيم. على حافة أسلوب خاص، يعد التجاوز هو الذي يفوز تمامًا؛ على render.defaultEdgeStyle هو الشكل المحسوب للفتحة الافتراضية، الملء فقط ما لا يوجد شيء أضيق - بما في ذلك ما تركته الحافة styleCb. ترتيب الخصوصية، وليس رد الاتصال يدق ثابتًا.

تحل styleCb الخاصة بالحافة محل مستواها بالكامل

عندما يعلن النمط الخاص بحافة ما عن styleCb، فإن قيمة الإرجاع الخاصة به هي only المصدر في هذا المستوى: الخصائص الثابتة الخاصة بالحافة و edgeStyleMap كلاهما تم تخطيه، وفقط defaultEdgeStyle يملأ الفجوات. لذلك styleCb العودة { strokeWidth: 4 } على حافة تحدد أيضًا strokeColor يفقد هذا اللون، و يفقد لون النوع أيضًا. إذا كنت تريد معاودة الاتصال و تصميم النوع، فافعل ما يلي ابحث داخل رد الاتصال، أو ضع رد الاتصال على render.defaultEdgeStyle، حيث إنه يخضع للخريطة بدلاً من ذلك.

عارض اللوحة القماشية يحل بشكل أقل

renderers/canvas مرتبة الشرف edgeStyleMap لكن يقرأ أربعة فقط من التسعة EdgeStyle خصائص. يقوم العارض SVG — الافتراضي — بحل كل هذه المشكلات.

صنع نوع من الطبقة

أنواع التصميم بصرف النظر عن نصفها فقط. UI.filter.edgeFacets يعلن أي حافة الأبعاد قابلة للتحويل:

UI: {
    filter: {
        edgeFacets: [{ key: 'kind', label: 'Relationship' }],
    },
}

{ key: 'kind' } هو إعلان كامل. وجه الحافة له شكل حافة الإعدادات الافتراضية: الطبقة هي multiselect، وخياراتها مشتقة من القيم المميزة التي تحملها حوافك الحقيقية فعليًا، لذلك لا يمكنها أبدًا تقديم خيار من شأنه أن يعود فارغة.

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

تنمو لوحة التصفية على قسم Relationships: صف واحد لكل نوع، كل منها به حامل الخط والعد، مع تطبيق ** مرة واحدة** — مثل حقول السمات الموجودة فوقها و الأسطورة بجانبه. لا يوجد شيء في تلك اللوحة ينتظر خلف زر التطبيق.

الأوجه التي ليست طبقات

type يقبل كامل المفردات — text، regex، select، multiselect، numberRange، boolean - بالإضافة إلى accessor و predicate للأبعاد التي ليست مفتاح بيانات عادي:

edgeFacets: [
    { key: 'kind', label: 'Relationship' },                    // a layer
    { key: 'weight', label: 'Confidence', type: 'numberRange' }, // a batch control
    {
        key: 'recent',
        label: 'Seen this week',
        type: 'boolean',
        accessor: (edge) => Date.now() - edge.getData().seenAt < 7 * 864e5,
    },
]

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

الخيارات

الخيار	اكتب	الافتراضي	ماذا يفعل
key	string	—	هوية التصفية setEdgeFilter(key, …) يأخذ هذا.
label	string	key	يتم استخدامه حرفيًا، لذا يمكن أن يأتي من طبقة الترجمة.
type	FilterFacetType	'multiselect'	الطبقة عبارة عن مجموعة من الأنواع، كل منها قيد التشغيل أو إيقاف التشغيل.
options	array | (graph) => array	مشتقة	تم حلها مقابل الرسم البياني المباشر في كل عملية إعادة بناء.
matchMode	FilterMatchMode	'exact'
accessor	(edge) => unknown	edge.getData()[key]	ما الذي يجعل الأوجه المحسوبة ممكنة.
predicate	(edge, value) => boolean	—	السيطرة الكاملة. يفوز على accessor / matchMode. يتم تشغيله لكل حافة لكل تطبيق، لذا اجعله رخيصًا.
order	number	أمر الإعلان	عرض الترتيب في اللوحة.

التبديل هو عدسة وليس تغيير تخطيط

يؤدي إيقاف الطبقة إلى تغيير ** الخطوط المرسومة ولا شيء آخر**. عقدة المواقف، والاختيار والكاميرا لم تتغير شيئا فشيئا، ولا تتم إعادة تشغيل المحاكاة.

هذا أمر متعمد، وهذا ما تفعله الأدوات الاحترافية: تحمل الشبكة لكل حافة hidden و لكل حافة منفصلة physics، سيجما edgeReducer لا يصل أبدًا إلى التخطيط، ولا يتم إعادة التخطيط Cytoscape وKeyLines إلا عند الطلب. أ العلاقة المخفية هي قرار العرض. إذا تم إخفاء طبقة الارتباط، فسيتم إعادة تدفق ملف الرسم البياني، لا يمكنك استخدام زر التبديل لـ قراءة الرسم البياني، وهو بيت القصيد.

الشيء الوحيد الذي ينحني هو الاشتراك، وعلى جانب العقدة: UI.filter.hideDisconnected يخفي العقد طبقة فروع. تترك هذه العقد المحاكاة، وبالتالي يستقر الرسم البياني مرة أخرى - وهذا هو السبب وراء ذلك بشكل افتراضي، ولماذا هو مرشح للعقدة وليس شيئًا يفعله التحكم في الطبقة من تلقاء نفسها.

ميكانيكيًا، Edge نما علمًا ثانيًا:

الملكية	معنى
layerVisible	ما إذا كانت طبقة هذه الحافة قيد التشغيل أم لا. أ نقض على visible.
visibleIgnoringLayer	ماذا سيكون visible إذا كانت كل طبقة قيد التشغيل: نقطة النهاية وأسباب الإخفاء اليدوي وحدها.
setLayerVisible(on)	قم بتبديل الطبقة، وإعادة اشتقاق visible. إرجاع ما إذا كان أي شيء قد تغير.
representedEdges	من أجل الوقوف: الحواف الحقيقية التي تتحدث عنها. غير محدد على حافة حقيقية.

تعمل بوابات قوة الارتباط على visibleIgnoringLayer، لذا فإن الحافة التي تكون طبقتها معطلة على سحب نقاط النهاية معا. visible مكتوب أيضًا عن طريق تصفية نقطة النهاية وبواسطة hideNode / showNode، ولهذا السبب تعيش حالة الطبقة بعيدًا عنها.

تبقى العقدة التي لا تحتوي على حواف مرئية مرئية

سيكون إخفاءه بمثابة قرار تصفية node، ولن يأخذ جانب الحافة واحدًا أبدًا. استخدم لوحة التصفية أو queryEngine.setFilter إذا كان هذا هو ما تريده تريد.

الانتقاء الفارغ يعني إزالة كل طبقة

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

مفتاح الطبقات في وسيلة الإيضاح

قسم أسطورة يعلن scope: 'edge' يسرد الأنواع التي تحتوي على line حامل - لون الحد والشرطة والعلامة عندما يقوم العارض بحلها - الجلوس بجانب الأقسام ذات نطاق العقدة في نفس البطاقة الراسية:

UI: {
    legend: {
        sections: [
            { key: 'type', title: 'Element' },                     // nodes
            { key: 'kind', title: 'Relationship', scope: 'edge' },  // edges
        ],
    },
}

• بالنظر إلى إعلان edgeFacets المطابق، فإن القسم يقود هذا الوجه — تصبح اللوحة ووسيلة الإيضاح عرضين لمرشح واحد، يتبع كل منهما الآخر.
• وبدون وجود واحد فإنه يحتفظ بوجه خاص به ولا يزال يرشح، هكذا هي الأسطورة أبدا مجرد ديكور.
• قسم لا يستخدم key ولا entries render.edgeTypeAccessor بالضبط حيث يعود قسم العقدة إلى nodeTypeAccessor.
• الأعداد ذات حواف حقيقية: يتم استبعاد بدائل المجموعة المنهارة، لذلك العد لا يقوم أبدًا بالإبلاغ عن العلاقة.

تُؤخذ ألوان العينات بالمعاينة من الألوان التي رسمها العارض. إذا رُسم نوع بأكثر من لون، يُحتفظ بالأول ويصدر تحذير. عرّف entries مع color من اختيارك عندما لا تمثل ألوان الخطوط أنواع العلاقات.

مجموعات انهارت

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

وبالتالي فإن كل موقف يحمل representedEdges، ويبقى على قيد الحياة بينما أي منهم يمر التصفية. نتيجتان تستحقان المعرفة:

• يؤدي إخفاء الطبقة إلى إخفاء الوضع البديل فقط عندما يتم إخفاء كل علاقة خلفها. الخط الذي يمثل كلاً من reference و correlation يبقى أثناء وجود أي منهما قيد التشغيل.
• يصل كل نوع وجه إلى داخل مجموعة مطوية — numberRange أو a predicate، ليست مجرد قائمة بالأنواع — لأن الوجه مطابق لـ حواف حقيقية بدلاً من البيانات الاحتياطية (الفارغة).

يبدو البديل لحافة واحدة مثل تلك الحافة، منقطًا، والنقر عليها يحدد حافة. يعد الوقوف لعدة مرات أمرًا عاديًا، ويوضح تحديده عدد الحواف التي يقف عليها ل.

قيادتها من الكود

يتم تسجيل جوانب الحافة في المنشئ، لذلك تعمل التصفية البرمجية ** كل وضع** — فقط اللوحة هي full وضع الكروم.

graph.queryEngine.setEdgeFilter('kind', { value: ['reference'], matchMode: 'exact' })
graph.queryEngine.getHiddenEdgeCount()      // 12
graph.queryEngine.removeEdgeFilter('kind')  // every layer back on

الطريقة	ماذا يفعل
setEdgeFilter(key, config)	اكتب مرشح حافة واحدة.
getEdgeFilters()	مرشحات الحافة النشطة، غير مسبوقة.
removeEdgeFilter(key)	قم بإسقاط واحدة - تعود مجموعة الطبقات هذه مرة أخرى.
getHiddenEdgeCount()	كم عدد الحواف المخفية بواسطة الطبقة.
getEdgeFacetValues(key)	القيم المميزة، لكل منها عدد وحافة عينة.
setEdgeFacets(facets)	استبدل المجموعة المعلنة.
registerEdgeFacet(facet)	أضف واحدًا بشكل إضافي — ما يستخدمه قسم وسيلة الإيضاح لحجز قسم خاص به.
replaceFilters(ownedKeys, filters)	استبدل المفاتيح التي تمتلكها فقط، واترك الآخرين بمفردهم.

تشترك مرشحات العقدة والحافة في سجل GraphFilters واحد، مع حمل مفاتيح الحافة أسفلها بادئة edge: (EDGE_FILTER_PREFIX، تم تصديرها من GraphQueryEngine) لذلك مفتاح يمكن أن يكون الاسم وجهًا للعقدة ووجهًا للحافة في وقت واحد. كل طريقة أعلاه تخفي بادئة؛ لا تقابله إلا إذا قرأت السجل الأولي.

renderer.getEdgeStyle(edge) عام، ويعيد النمط إلى العارض فعليًا تم حلها - نفس الاستدعاء الذي تم بناء حوامل وسيلة الإيضاح عليه وطريقة التأكيد في اختبار أن ما أعلنته هو ما رسم.

انظر أيضا

• بطاقة معرض طبقات الحافة — الثلاثة الأسطح على قماش واحد
• خيارات العرض — نصف العقدة من زوج الوصول/الخريطة
• Filters — جوانب العقدة وإعادة استخدام جوانب حافة المفردات
• أسطورة — الأقسام، وما يمكن أن تعرفه العينة وما لا يمكنها معرفته