البدء

Pivotick عبارة عن مكتبة تصور رسومية TypeScript قابلة للاختراق مبنية على أعلى D3 محاكاة القوة. فهو يعرض رسومًا بيانية موجهة أو غير موجهة باستخدام عناصر تحكم تفاعلية ومحاكاة القوة ودعم تخطيط الشجرة وعناصر واجهة المستخدم الاختيارية مثل الأشرطة الجانبية وأشرطة الأدوات وقوائم السياق وتلميحات الأدوات.

الاستخدام الأساسي

يمكن استخدام Pivotick إما كوحدة JavaScript حديثة أو مباشرة في المتصفح عبر علامة البرنامج النصي.

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

التثبيت

1. استخدم الإصدار GitHub (لا يلزم إنشاء)

إذا كنت لا ترغب في بناء المشروع بنفسك، قم بتنزيل أحدث إصدار من GitHub.

الخطوات:

1. انتقل إلى صفحة الإصدارات الخاصة بالمستودع
2. قم بتنزيل أحدث حزمة dist
3. استخرجه في مشروعك

يجب أن تحصل على ملفات مثل:

pivotick.es.js
pivotick.umd.js
pivotick.iife.js
pivotick.css

ثم استخدمها وفقًا لبيئتك:

وحدة ES (مستحسن)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

متصفح IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

2. البناء من المصدر (موصى به للتطوير)

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

git clone https://github.com/pivotick/pivotick.git
cd pivotick
npm install
npm run build

بعد البناء، ستكون الملفات المجمعة متاحة في:

dist/

يمكنك بعد ذلك استيرادها مباشرة حسب البيئة الخاصة بك:

وحدة ES (مستحسن)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

التصميم

Pivotick يأتي مع الأنماط الافتراضية المضمنة في pivotick.css:

يمكنك تخصيص المظهر بطريقتين:

• استخدم Pivotick الفصول المدمجة.
• تجاوز الأنماط باستخدام المتغيرات CSS.

:root {
  --pvt-node-color: #FDDA24;
  --pvt-node-stroke: #000000;
  --pvt-edge-stroke: #EF3340;
}

.pvt-node circle {
  fill: cyan;
}