مكتبة تصور الرسم البياني في جافا سكريبت

Question

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

ملحوظة:أنا لا أبحث عن مكتبة الرسوم البيانية.

Answer 1

لقد قمت للتو بتجميع ما قد تبحث عنه: http://www.graphdracula.net

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

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

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

---

قد ترغب في إلقاء نظرة على مشاريع أخرى أيضًا!فيما يلي مقارنتان تعريفيتان:

• المقارنة الاجتماعية يحتوي على قائمة واسعة من المكتبات، وسيعمل سطر "الرسم البياني للعقدة / الحافة" على تصفية تلك المكتبات المرئية للرسوم البيانية.

• قامت DataVisualization.ch بتقييم العديد من المكتبات، بما في ذلك مكتبات العقدة/الرسم البياني.لسوء الحظ، لا يوجد رابط مباشر لذا سيتعين عليك تصفية "الرسم البياني":

فيما يلي قائمة بالمشاريع المماثلة (تم ذكر بعضها هنا بالفعل):

مكتبات جافا سكريبت النقية

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

• Cytoscape.js - تحليل الرسم البياني التفاعلي والتصور مع دعم الهاتف المحمول، باتباع اصطلاحات jQuery.بتمويل من منح المعاهد الوطنية للصحة وتم تطويره بواسطة @maxkfranz (يرى إجابته أدناه) بمساعدة العديد من الجامعات والمنظمات الأخرى.

• مجموعة أدوات JavaScript InfoVis - Jit، إطار تفاعلي متعدد الأغراض للرسم والتخطيط.انظر على سبيل المثال شجرة الزائدية.تم تصميمه بواسطة مهندس Twitter dataviz نيكولاس جارسيا بيلمونت و تم شراؤها من قبل سينشا في 2010.

• D3.js مكتبة تصور JS قوية ومتعددة الأغراض، خليفة Protovis.انظر الرسم البياني الموجه للقوة المثال، وأمثلة الرسم البياني الأخرى في صالة عرض.

• مؤامرة تستخدم مكتبة تصور JS D3.js مع روابط JS وPython وR وMATLAB.راجع مثال nexworkx في IPython هنا, مثال التفاعل البشري هنا, ، و JS تضمين API.

• سيجما.js مكتبة خفيفة الوزن ولكنها قوية لرسم الرسوم البيانية

• jsPlumb مكون jQuery الإضافي لإنشاء رسوم بيانية تفاعلية متصلة

• يقظ - خوارزمية تخطيط الرسم البياني الموجهة بالقوة

• معالجة.js منفذ جافا سكريبت لمكتبة المعالجة بواسطة John Resig

• JS الرسم البياني - صناديق السحب والإسقاط متصلة بخطوط مستقيمة.الحد الأدنى من التخطيط التلقائي للخطوط.

• RaphaelJS's Graffle - مثال رسم بياني تفاعلي لمكتبة رسم متجهات عامة متعددة الأغراض.لا يستطيع RaphaelJS تخطيط العقد تلقائيًا؛ستحتاج إلى مكتبة أخرى لذلك.

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

• mxGraph مكتبة الرسوم البيانية HTML 5 التجارية سابقًا، متاحة الآن ضمن Apache v2.0.mxGraph هي المكتبة الأساسية المستخدمة في draw.io.

المكتبات التجارية

• GoJS مكتبة الرسم البياني التفاعلية والتخطيط

• ملفات y لـ HTML مكتبة الرسم البياني والتخطيط التجاري

• تنسيق خطي مجموعة أدوات تصور شبكة JS التجارية

• ZoomCharts مكتبة التصورات التجارية متعددة الأغراض

• مخطط جافا سكريبت للمزامنة مكتبة المخططات التجارية للرسم والتصور.

المكتبات المهجورة

• ويب سيتوسكيب عارض شبكة JS قابل للتضمين (لم يتم التخطيط لميزات جديدة؛خلفه Cytoscape.js)

• كانفيز شبيبة العارض للرسوم البيانية Graphviz. متروك في سبتمبر 2013.

• arbor.js رسوم بيانية متطورة مع فيزياء جميلة وجذابة للعين.تم التخلي عنه في مايو 2012.عديد شبه صيانة الشوكات موجودة.

• com.jssvggraph “إن أبسط خوارزمية تخطيط الرسم البياني الموجهة بالقوة يتم تنفيذها كمكتبة Javascript تستخدم كائنات SVG”.تم التخلي عنها في عام 2012.

• com.jsdot تطبيق رسم الرسم البياني من جانب العميل. تم التخلي عنها في عام 2011.

• بروتوفيس مجموعة الأدوات الرسومية للتصور (جافا سكريبت).تم استبداله بـ d3.

• عجلة مو تمثيل JS التفاعلي للاتصالات والعلاقات (2008)

• JSViz البرنامج النصي لتصور الرسم البياني في حقبة 2007

• داجري تخطيط الرسم البياني لجافا سكريبت

مكتبات غير جافا سكريبت

• جراففيز لغة تصور الرسم البياني متطورة

  • تم تجميع Graphviz إلى Javascript باستخدام Emscripten هنا مع ال العرض التفاعلي عبر الإنترنت هنا

• توهج رسم بياني جميل وقوي يعتمد على الفلاش

• NodeBox تصور الرسم البياني بايثون

Answer 2

تنصل:أنا مطور Cytoscape.js

Cytoscape.js عبارة عن مكتبة لتصور الرسوم البيانية بتنسيق HTML5.واجهة برمجة التطبيقات (API) متطورة وتتبع اصطلاحات jQuery، بما في ذلك

• محددات للاستعلام والتصفية (cy.elements("node[weight >= 50].someClass") يفعل الكثير كما تتوقع)
• تسلسل (على سبيل المثال. cy.nodes().unselect().trigger("mycustomevent")),
• وظائف تشبه jQuery للربط بالأحداث،
• العناصر كمجموعات (مثل أن jQuery يحتوي على مجموعات من HTMLDomElements)،
• القابلية للتوسعة (يمكن إضافة تخطيطات مخصصة وواجهة مستخدم ووظائف أساسية ووظائف تجميع وما إلى ذلك)
• و اكثر.

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

http://js.cytoscape.org

Answer 3

JsVIS كان لطيفًا جدًا، ولكنه بطيء مع الرسوم البيانية الأكبر حجمًا، وتم التخلي عنه منذ عام 2007.

prefus عبارة عن مجموعة من الأدوات البرمجية لإنشاء تصورات بيانات تفاعلية غنية في Java. توهج هي مكتبة ActionScript لإنشاء تصورات يتم تشغيلها في Adobe Flash Player، وتم التخلي عنها منذ عام 2012.

Answer 4

في السيناريو التجاري، هناك متسابق جاد بالتأكيد ملفات y لـ HTML:

فإنه يوفر:

• سهل يستورد البيانات المخصصة (هذا العرض التفاعلي عبر الإنترنت يبدو أنه يفعل بالضبط ما كان يبحث عنه OP)
• التحرير التفاعلي لإنشاء الرسوم البيانية ومعالجتها من خلال إيماءات المستخدم (راجع الملف الكامل محرر)
• ضخم واجهة برمجة التطبيقات للبرمجة لتخصيص كل جانب من جوانب المكتبة
• الدعم ل تجميع و التعشيش (سواء التفاعلية أو من خلال خوارزميات التخطيط)
• لا يعتمد على مجموعة أدوات محددة لواجهة المستخدم ولكنه يدعم اندماج في أي مجموعة أدوات Javascript موجودة تقريبًا (راجع ملف عروض "التكامل".)
• تخطيط تلقائي (أنماط مختلفة، مثل "هرمي"، و"عضوي"، و"متعامد"، و"شجرة"، و"دائري"، و"شعاعي"، والمزيد)
• توجيه تلقائي متطور للحافة (توجيه حافة متعامد وعضوي مع تجنب العوائق)
• تخطيط تزايدي وجزئي (إضافة وإزالة العناصر وتغيير بقية المخطط بشكل طفيف أو عدم تغييره على الإطلاق)
• دعم التجميع والتداخل (سواء بشكل تفاعلي أو من خلال خوارزميات التخطيط)
• تنفيذات خوارزميات تحليل الرسم البياني (المسارات والمركزيات وتدفقات الشبكة وما إلى ذلك)
• يستخدم تقنيات HTML 5 مثل SVG+CSS وCanvas وخصائص الاستفادة من Javascript الحديثة وغيرها من ميزات ES5 وES6 (ولكن لنفس السبب لن يتم تشغيلها في إصدارات IE 8 والإصدارات الأقدم).
• يستخدم واجهة برمجة التطبيقات المعيارية التي يمكن تحميلها عند الطلب باستخدام أدوات تحميل UMD

فيما يلي نموذج عرض يوضح معظم الميزات المطلوبة:

الكشف الكامل:أنا أعمل لدى yWorks، لكن في Stackoverflow لا أمثل صاحب العمل.

Answer 5

كما ذكر جوروز, ال جيت يحتوي على العديد من تخطيطات الرسوم البيانية/الشجرة الرائعة، بما في ذلك تصورات RGraph وHyperTree الجذابة للغاية.

أيضًا، لقد قمت للتو بوضع صورة بسيطة للغاية تعتمد على SVG التنفيذ على جيثب (لا توجد تبعيات، ~125 LOC) والتي يجب أن تعمل بشكل جيد بما يكفي للرسوم البيانية الصغيرة المعروضة في المتصفحات الحديثة.