pivotick v3.0.0

---

محورية / RendererOptions / GraphRendererOptions

واجهة: GraphRendererOptions

محدد في: interfaces/RendererOptions.ts:10

خصائص

beforeRender()

beforeRender: (graph) => void

محدد في: interfaces/RendererOptions.ts:289

تم تنفيذ رد الاتصال أثناء مرحلة البدء، قبل العرض الأول

المعلمات

graph

Pivotick

مثيل الرسم البياني

المرتجعات

void

---

defaultEdgeStyle

defaultEdgeStyle: EdgeStyle

محدد في: interfaces/RendererOptions.ts:114

نمط الحافة الافتراضي الذي سيتم تطبيقه على جميع العقد

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

defaultEdgeStyleValue

---

defaultLabelStyle

defaultLabelStyle: LabelStyle

محدد في: interfaces/RendererOptions.ts:119

سيتم تطبيق نمط تسمية الحافة الافتراضية على جميع العقد

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

defaultLabelStyleValue

---

defaultNodeStyle

defaultNodeStyle: NodeStyle

محدد في: interfaces/RendererOptions.ts:109

نمط العقدة الافتراضي الذي سيتم تطبيقه على جميع العقد

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

defaultNodeStyleValue

---

detailTransition?

optional detailTransition: number

محدد في: interfaces/RendererOptions.ts:267

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

يغطي عقدة مبادلة بين NodeStyle.tiers، NodeStyle.focusTier رسم الوصول والمغادرة وعبور التسمية GraphRendererOptions.minLabelFontSize. يتم الاحتفاظ بالرسم الصادر حيًا على ملف طبقة خاصة بها وتتلاشى الاثنتان مع بعضهما البعض، لذلك لا تغيب العقدة أبدًا في منتصف المبادلة - ليونة لفترة وجيزة فقط حيث تتداخل.

كل عقدة على الشاشة تعبر عتبة في نفس اللحظة، لذلك يبدأ هذا بعدد كبير يتلاشى مع تغير العقد. prefers-reduced-motion يطفئه.

تم قياسها على 210 عقدة تحمل كل منها بطاقة مقاس 140 × 44: التلاشي في حد ذاته لا يكلف شيئًا - تحمل اللوحة القماشية 60 إطارًا في الثانية لطولها بالكامل - ولكنها تحافظ على العديد من البطاقات الصادرة حية للحظة يضيف حوالي 26 مللي ثانية إلى الإطار الواحد الذي يقضيه العبور بالفعل. اضبطه على 0 على الرسم البياني حيث يكون هذا الإطار أكثر أهمية من الانتقال.

الافتراضي

160

---

dragEnabled

dragEnabled: boolean

محدد في: interfaces/RendererOptions.ts:313

الافتراضي

true

---

edgeStyleMap?

optional edgeStyleMap: Record<string, Partial<EdgeStyle>>

محدد في: interfaces/RendererOptions.ts:223

خرائط أنواع الحافة لأنماطها.

كل مفتاح هو نوع حافة (كما تم إرجاعه بواسطة edgeTypeAccessor) وخرائط لـ a جزئي EdgeStyle. لا تزال ميزة styleCb الخاصة بالحافة تفوز على الخريطة، بالضبط كما هو الحال في nodeStyleMap.

ملاحظات

تستخدم بالإقتران مع edgeTypeAccessor

مثال

edgeStyleMap: {
  'object-reference': { strokeColor: '#428bca' },
  'correlation': { strokeColor: '#888', dashed: true },
}

---

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

محدد في: interfaces/RendererOptions.ts:204

وظيفة للوصول إلى نوع الحافة — البعد edgeStyleMap يتم تشغيل المفاتيح، ويشتق قسم أسطورة edge وجوانب مرشح الحافة من عندما لا يتم منحهم مفتاح بيانات خاص بهم.

المعلمات

edge

Edge

المرتجعات

string | undefined

ملاحظات

تستخدم بالإقتران مع edgeStyleMap

مثال

edgeTypeAccessor: (edge) => edge.getData()?.kind

---

enableFocusMode

enableFocusMode: boolean

محدد في: interfaces/RendererOptions.ts:228

يتحكم في ما إذا كانت العقد والحواف غير المتصلة ستظهر باللون الرمادي عند تحديد عقدة

الافتراضي

true

---

enableNodeExpansion

enableNodeExpansion: boolean

محدد في: interfaces/RendererOptions.ts:234

يتحكم في إمكانية توسيع العقد أو طيها لإظهار العقد التابعة لها. false يُسقط أيضًا رتبة الشيفرون والاختصار Enter والمخطط التفصيلي المنهار المتقطع.

الافتراضي

true

---

fitAnchor?

optional fitAnchor: string

محدد في: interfaces/RendererOptions.ts:311

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

---

focusTierTrigger?

optional focusTierTrigger: "off" | "selection" | "both" | "hover"

محدد في: interfaces/RendererOptions.ts:245

عندما تشتعل العقدة NodeStyle.focusTier. الأسلوب يقول ما التركيز الرسم هو؛ هذا يقول متى.

يعمل التحديد فقط على ترقية العقدة التي تم تحديدها من تلقاء نفسها — مربع تحديد من خمسين سيكون جدارًا من البطاقات المتداخلة. 'off' يقمع السلوك دون تعديل النمط، وهو ما يقوم المتكامل بتضمين احتياجات شخص آخر محددة مسبقًا.

الافتراضي

'both'

---

groupOutline()?

optional groupOutline: (group) => string | void | HTMLElement

محدد في: interfaces/RendererOptions.ts:173

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

المعلمات

group

GroupInfo

المرتجعات

string | void | HTMLElement

---

groupStyle()?

optional groupStyle: (group, base) => void | Partial<NodeStyle>

محدد في: interfaces/RendererOptions.ts:167

مظهر المجموعة التي تم إنشاؤها بواسطة UI.simplify، موضوعة فوق الإعداد الافتراضي: قرص في لون الكتابة داخل حلقة، والعد على القرص بمجرد وجود مساحة، والملصق أدناه. يتم رسم المجموعة كعقدة، لذلك tiers، focusTier، html، shape و badges العمل كما يعملون على واحد. لا يُرجع شيئًا للحفاظ على الإعداد الافتراضي.

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

المعلمات

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

المرتجعات

void | Partial<NodeStyle>

أمثلة

groupStyle: (group) => group.rule === 'bySource' ? { color: '#6b7280' } : undefined

groupStyle: (group, base) => ({ tiers: [...(base.tiers ?? []), { width: 140, height: 44, style: { html: () => chip(group) } }] })

---

interactionEnabled

interactionEnabled: boolean

محدد في: interfaces/RendererOptions.ts:315

الافتراضي

true

---

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

محدد في: interfaces/RendererOptions.ts:135

يحدد الأنماط المخصصة لأشكال العلامات المستخدمة في الرسم البياني.

كل مفتاح هو نوع علامة (على سبيل المثال، 'diamond'، 'arrow') وخرائط لكائن MarkerStyle.

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

defaultMarkerStyleMap

مثال

markerStyleMap: {
  'diamond': {
    fill: '#44c77f',
  },
}

---

maxZoom

maxZoom: number

محدد في: interfaces/RendererOptions.ts:299

الافتراضي

10

---

minFitScale?

optional minFitScale: number

محدد في: interfaces/RendererOptions.ts:305

أدنى مقياس يتم التصغير إليه. يتم عرض المحتوى الذي يحتاج إلى أقل في هذا مقياس متمركز على fitAnchor، ويمتد بعد حواف القماش. غير محدد، مناسبا يظهر دائما كل شيء. المقياس الصريح الذي تم تمريره إلى fitAndCenter يتجاهله.

---

minLabelFontSize?

optional minLabelFontSize: number

محدد في: interfaces/RendererOptions.ts:284

حجم الخط المعروض، بـ CSS بكسل، والذي لا يتم رسم الملصق أسفله.

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

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

0 يرسم كل تسمية عند كل تكبير.

الافتراضي

9

---

minZoom

minZoom: number

محدد في: interfaces/RendererOptions.ts:297

الافتراضي

0.05

---

nodeStyleMap?

optional nodeStyleMap: Record<string, Partial<NodeStyle>>

محدد في: interfaces/RendererOptions.ts:190

تعيين أنواع العقد إلى أنماطها.

كل مفتاح هو نوع العقدة (كما تم إرجاعه بواسطة nodeTypeAccessor) ويتم تعيينه إلى كائن NodeStyle.

ملاحظات

تستخدم بالإقتران مع nodeTypeAccessor

مثال

nodeStyleMap: {
  'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
  'spoke': { shape: 'triangle', color: '#f00' },
}

---

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

محدد في: interfaces/RendererOptions.ts:148

وظيفة للوصول إلى نوع العقدة. تستخدم في

يستخدم لتصميم العقد بناءً على نوعها.

المعلمات

node

Node

المرتجعات

string | undefined

ملاحظات

تستخدم بالإقتران مع nodeStyleMap

مثال

nodeTypeAccessor: (node) => node.getData()?.type

---

renderCluster()?

optional renderCluster: (cluster) => string | void | HTMLElement

محدد في: interfaces/RendererOptions.ts:104

عارض مخصص للمجموعات.

يسمح بالتحكم الكامل في كيفية عرض المجموعة يمكن أن ترجع الدالة إما:

• HTMLElement لاستخدامه ككتلة، أو
• سلسلة لعرضها داخل المجموعة

المعلمات

cluster

Node

المرتجعات

string | void | HTMLElement

مثال

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

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

---

renderLabel()?

optional renderLabel: (edge) => string | void | HTMLElement

محدد في: interfaces/RendererOptions.ts:77

عارض مخصص لتسميات الحافة.

يسمح بالتحكم الكامل في كيفية عرض تسميات الحافة. يمكن أن ترجع الدالة إما:

• HTMLElement لاستخدامه كتسمية للحافة، أو
• سلسلة لعرضها داخل التسمية

المعلمات

edge

Edge

المرتجعات

string | void | HTMLElement

مثال

renderLabel: (edge: Edge): HTMLElement | string | void => {
  const style = [
    'display:inline-block',
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  const text = edge.getData().label;
  return `<span style="${style}">${text}</span>`;
}

---

renderNode()?

optional renderNode: (node) => string | void | HTMLElement

محدد في: interfaces/RendererOptions.ts:52

عارض مخصص للعقد.

يسمح بالتحكم الكامل في كيفية عرض العقدة يمكن أن ترجع الدالة إما:

• HTMLElement ليتم استخدامه كعقدة،
• سلسلة لعرضها داخل العقدة، أو
• لا شيء، لترك تلك العقدة لخط أنابيب التصميم العادي

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

بالنسبة للبطاقة التي تتكون من بقية سلسلة التصميم، قم بالإعلان NodeStyle.html مع shape: 'none' بدلاً من ذلك؛ يتم حله حسب النوع أو لكل العقدة، حيث تكون هذه العقدة عالمية.

المعلمات

node

Node

المرتجعات

string | void | HTMLElement

مثال

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

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

---

selectionBox

selectionBox: SelectionBox

محدد في: interfaces/RendererOptions.ts:316

---

type

type: RendererType

محدد في: interfaces/RendererOptions.ts:15

يحدد طريقة العرض المستخدمة في الرسم البياني.

---

zoomAnimation

zoomAnimation: boolean

محدد في: interfaces/RendererOptions.ts:293

الافتراضي

true

---

zoomAnimationDuration

zoomAnimationDuration: number

محدد في: interfaces/RendererOptions.ts:295

الافتراضي

300

---

zoomEnabled

zoomEnabled: boolean

محدد في: interfaces/RendererOptions.ts:291

الافتراضي

true