خيارات التكوين

خيارات Pivotick الرئيسية

Pivotick يدعم مجموعة واسعة من الخيارات لتخصيص السلوك والتخطيط والعرض والمحاكاة وواجهة المستخدم والتفاعلات.

الخيار	اكتب	الافتراضي	الوصف
isDirected	boolean	true	إذا كان هذا صحيحًا، فسيتم التعامل مع الحواف وفقًا للتوجيهات.
callbacks	InterractionCallbacks	{}	عمليات الاسترجاعات الاختيارية لتفاعلات المستخدم (النقر، التمرير، السحب، وما إلى ذلك).
layout	LayoutOptions	{}	تكوين تخطيط الرسم البياني (القوى، الشجرة، التباعد، المحاذاة).
render	GraphRendererOptions	{}	تخصيص خيارات العرض مثل مظهر العقدة/الحافة
simulation	SimulationOptions	{}	خيارات للتحكم في محاكاة الفيزياء (القوى، التكرارات، وما إلى ذلك).
UI	GraphUI	{}	خيارات خاصة بواجهة المستخدم مثل الشريط الجانبي والتحديد وتلميحات الأدوات وعناصر التحكم.
i18n	I18nOptions	{}	لغة النص الخاص بالمكتبة. راجع ترجمة واجهة المستخدم.

الاستخدام

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

عمليات الاسترجاعات

Pivotick يتيح لك الارتباط بتفاعلات المستخدم وأحداث المحاكاة من خلال الخيار callbacks. يمكنك توفير وظائف لمختلف الأحداث التي تم إنشاؤها بواسطة المستخدم أو الرسم البياني.

مزيد من المعلومات على صفحة الاسترجاعات

عينات رد الاتصال:

رد الاتصال	المعلمات	الوصف
onNodeClick	(event: PointerEvent, node: Node, element: svg)	يتم تشغيله عند النقر فوق العقدة.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	يتم إطلاقه عندما يدخل الماوس إلى العقدة.
onSimulationTick	()	يتم تشغيله عند كل علامة محاكاة (مفيدة للعرض المخصص).

معلومات

النوع element هو svg فقط إذا كان الخيار render.type == "svg".

مثال

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

خيارات التخطيط

Pivotick يدعم استراتيجيات تخطيط متعددة لتحديد موضع العقد. يمكنك تكوين التخطيط من خلال الخيار layout.

الخيار	اكتب	الافتراضي	الوصف
type	'force' | 'tree' | 'structured'	'force'	خوارزمية التخطيط المستخدمة. 'force' يطبق تخطيط القوة القائم على الفيزياء. 'tree' يرتب العقد في هيكل شجرة. 'structured' الأماكن والدبابيس رسم بياني صغير، راجع التخطيط المنظم.

خيارات تخطيط الشجرة

عند تحديد type: 'tree'، يمكنك اختيار اتجاه الشجرة وترتيب عقدها بشكل اختياري في تخطيط شعاعي.

الخيار	اكتب	الافتراضي	الوصف
horizontal	boolean	false	ترتيب العقد أفقيًا وليس رأسيًا.
radial	boolean	false	ضع العقد في تخطيط شعاعي بدلاً من الرأسي.

مثال

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

خيارات العرض

Pivotick يسمح لك بتخصيص كيفية عرض العقد والحواف والتسميات، وتكوين تفاعلات إطار العرض مثل التكبير/التصغير والتحديد المتعدد، باستخدام الخيار render.

الخيار	اكتب	الافتراضي	الوصف
renderNode	(node: Node) => HTMLElement | string | void	undefined	عارض مخصص للعقد.
defaultNodeStyle	NodeStyle	defaultNodeStyle	يتم تطبيق التصميم الافتراضي على كافة العقد.
nodeTypeAccessor	(node: Node) => string | undefined	undefined	وظيفة للوصول إلى نوع العقدة المستخدمة مع nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	أنواع عقدة الخرائط (من nodeTypeAccessor) إلى الأنماط.
minLabelFontSize	number	9	حجم الخط المعروض، بـ CSS بكسل، والذي لا يتم رسم الملصق أسفله. 0 يرسمهم عند كل تكبيرة.
zoomEnabled	boolean	true	تمكين التكبير.
dragEnabled	boolean	true	تمكين سحب العقد.

نوع التقديم

نصيحة

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

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

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

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

خيارات المحاكاة

تتحكم خيارات المحاكاة في السلوك الفيزيائي والتخطيطي للعقد والحواف لمحرك محاكاة الرسم البياني.

تحقق من D3-force الوثائق الرسمية لمعرفة المزيد.

في أغلب الأحيان، ليست هناك حاجة لتعديل هذه الخيارات: بشكل افتراضي Pivotick ضبط التخطيط نفسه من عدد العقد الخاصة بها الحجم والقماش، ويستمر في الضبط مع تغير الرسم البياني. تحديد أي خيار القوة اختر هذا الرسم البياني واحتفظ بقيمتك — أو اضبط simulation.physics على 'auto' / 'manual' أن يكون صريحاً.

خيارات واجهة المستخدم

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

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

وضع واجهة المستخدم

يتحكم الخيار mode في السلوك العام ومستوى التفاعل لواجهة مستخدم الرسم البياني.

• full افتراضي: واجهة مستخدم كاملة مع تمكين جميع اللوحات والقوائم والتفاعلات.
• light: الحد الأدنى من واجهة المستخدم مع تمكين التفاعلات الأساسية.
• viewer: يسمح فقط بالتنقل في الرسم البياني (التحريك والتكبير/التصغير والسحب) دون عرض أي لوحات واجهة مستخدم.
• static: رسم بياني ثابت، لا توجد لوحات واجهة مستخدم أو تفاعلات؛ الرسم البياني للقراءة فقط.

لاستخدام نمط الصورة Pivotick، استخدم ما يلي:

const options = {
    UI: {  
        mode: 'viewer'
    },
}