G6

الإنجليزية | 简体中文

G6: إطار تصور الرسم البياني في TypeScript

مقدمة • أمثلة • بداية سريعة • API

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

سمات

يتميز G6 ، كمحرك تصور رسم بياني احترافي ، بالميزات التالية:

• العناصر الغنية : إنه يأتي مع مجموعة متنوعة من عناصر العقدة المدمجة والحافة واتصالات التحرير والسرد مع تكوينات واسعة النطاق ، ويدعم عوائد البيانات ، ولديها آلية مرنة لتوسيع العناصر المخصصة.
• التفاعلات التي يمكن التحكم فيها : ويشمل أكثر من 10 سلوكيات تفاعل مدمجة ويوفر مجموعة غنية من الأحداث ، مما يسهل توسيع السلوكيات التفاعلية المخصصة.
• تخطيط عالي الأداء : يتميز المحرك بأكثر من 10 تخطيطات شائعة للرسوم البيانية ، بعضها يستفيد من GPU والحوسبة المتوازية للصدأ لتحسين الأداء ، ويدعم تطوير التخطيط المخصص.
• المكونات الإضافية المريحة : وظائف وأداء مكون الإضافي المدمج المدمج ، مع توسيع مرن ، مما يسهل تنفيذ إمكانيات الأعمال المخصصة.
• موضوعات وألواح متعددة : توفر مجموعتين من الموضوعات المدمجة ، الضوء والظلام ، تدمج أكثر من 20 لوحة ألوان مجتمعية شهيرة استنادًا إلى نظام ألوان ANTV الجديد.
• عرض متعدد البيئة : تسخير قوة G ، فإنه يدعم التقديم في القماش ، SVG ، و WebGL ، وكذلك عرض من جانب الخادم مع Node.js ؛ كما يوفر حزم مكون الإضافي توفر تفاعلات قوية ثلاثية الأبعاد وتفاعلات مكانية تعتمد على WebGL.
• React Ecosystem : من خلال استخدام النظام الإيكولوجي للواجهة الأمامية لـ React ، فإنه يدعم العقد React ، مما يثري بشكل ملحوظ الأنماط التقديمية لعقد G6.

؟ ابدء

عادة ما يتم تثبيت G6 عبر مدير الحزمة مثل NPM أو YARN.

$ npm install @antv/g6

يمكن استيراد كائن Graph من G6.

 < div id =" container " > </ div > 

 import { Graph } from '@antv/g6' ;

// Get the Data.
const data = {
  nodes : [
    /* your nodes data */
  ] ,
  edges : [
    /* your edges data */
  ] ,
} ;

// Create the Graph instance.
const graph = new Graph ( {
  container : 'container' ,
  data ,
  node : {
    palette : {
      type : 'group' ,
      field : 'cluster' ,
    } ,
  } ,
  layout : {
    type : 'force' ,
  } ,
  behaviors : [ 'drag-canvas' , 'drag-node' ] ,
} ) ;

// Render the Graph.
graph . render ( ) ;

كل شيء على ما يرام ، يمكنك الحصول على الرسم البياني الجميل التالي!

؟ النظام البيئي

• مخططات تصميم النمل : مكتبة مخطط React تعتمد على G2 ، G6 ، X6 ، L7.
• Graphin : غلاف رد فعل بسيط يعتمد على G6 ، بالإضافة إلى SDK لتطوير تطبيقات تصور الرسم البياني.

لمزيد من مشاريع النظام الإيكولوجي مفتوح المصدر ، نرحب بالمساهمات. لا تتردد في تقديم العلاقات العامة لإدراجها.

؟ المساهمة

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

؟ رخصة

معهد ماساتشوستس للتكنولوجيا.