مكون موضوع D3 Graphviz

تخصيص مكون السمة
1

يتيح لك مكون موضوع D3 Graphviz إضافة رسوم بيانية متحركة من Graphviz إلى منشوراتك باستخدام لغة DOT. وهو مبني على d3-graphviz.

المستودع: GitHub - magjac/discourse-d3-graphviz: Discourse theme component for rendering animated Graphviz graphs using DOT source code · GitHub

التثبيت

راجع كيف أقوم بتثبيت موضوع أو مكون موضوع؟

الاستخدام

الرسوم البيانية الثابتة

هذه مجرد مقدمة مختصرة. قد ترغب في قراءة الدليل التفصيلي في Render Graphviz graphs directly in your posts - Announcements - Graphviz الذي يعرض المكون قيد الاستخدام، أو الانضمام إلى منتدى Graphviz حيث يمكنك تجربته بنفسك.

لعرض رسم بياني مضمن في منشورك، قم بتغليف تعريف الرسم بوسوم dot على النحو التالي:

[dot] digraph {a -\u003e b} [/dot]

يُ支持 أيضًا الشكل الكتلي:

[dot]
digraph {
  a -\u003e b
}
[/dot]

انتقالات متحركة بين الرسوم البيانية

يُظهر الانتقال المتحرك بين عدة رسوم بيانية عند إضافة أكثر من رسم بياني إلى نفس الفقرة من منشور، مع وجود مسافات بيضاء فقط بينها:

[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]
[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]

أو

[dot]
digraph {
  a -\u003e b
}
[/dot]
[dot]
digraph {
  a -\u003e b
  a -\u003e c
}
[/dot]
[dot]
digraph {
  a -\u003e b
  a -\u003e c
  b -\u003e c
}
[/dot]

تُفصل الفقرات بسطور فارغة، لذا فإن هذا سيولد ثلاثة رسوم بيانية منفصلة:

[dot] digraph {bgcolor=lightblue a -\u003e b} [/dot]

[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c} [/dot]

[dot] digraph {bgcolor=lightblue a -\u003e b; a -\u003e c; b -\u003e c} [/dot]

الخيارات

يمكن تخصيص الرسوم البيانية والانتقالات المتحركة بشكل كبير من خلال خيارات يمكنك إضافتها إلى وسم dot. راجع Render Graphviz graphs directly in your posts - Announcements - Graphviz.

8 إعجابات
2

أبلغ عميل بالأمس عن اختفاء محتوى جميع منشوراته. قمت بتعطيل هذا القالب لحل المشكلة.

أعتقد أنه يجب نقل هذا إلى #theme:broken-theme، لكنني تساءلت عما إذا كان أي شخص آخر واجه مشاكل مماثلة.

3 إعجابات
3

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

3 إعجابات
4

@pfaffman أعتذر عن عدم رؤية هذا المنشور والتصرف بشأنه في وقت سابق. لا بد أنني قمت بإيقاف الإشعارات عن طريق الخطأ. لاحظت هذه المشكلة بنفسي في الماضي، لكن لم يكن لدي وقت للتعامل معها حينها، ولم أتذكر أنني نشرت هذا ولم أكن على علم بأن أي شخص آخر يستخدمه.

يسعدني أن أعلن أن مكون سمة d3-graphviz يعمل مرة أخرى. يمكنك رؤيته أثناء العمل على Render Graphviz graphs directly in your posts - Announcements - Graphviz.

@sam هل يمكنك إزالة علامة broken الآن؟

4 إعجابات
5

لقد قمت بتثبيت هذه المكونة، (Discourse 3.2.1)
نسخت المثال أعلاه في منشور جديد، لم يتم عرضه كرسم بياني،
هل يمكن لأحد أن يؤكد، إذا كان هذا يعمل الآن، شكرًا…

هذا ناتج عن شيء “Content Security Policy” (سياسة أمان المحتوى)…
لست متأكدًا مما يجب إضافته في إعداد “content security policy script src” لجعله يعمل… هل يمكن لأحد المساعدة، شكرًا…

6

هل جربت المكون الإضافي بدلاً من ذلك؟ يبدو أكثر استقرارًا.

ربما تحتاج إلى السماح بهذه الروابط:

إعجابَين (2)
7

شكرا @Arkshine
النسخة المستضافة لدينا لا تتضمن المكون الإضافي graphviz للخطة :frowning:
حاولت إضافة هذه الملفات الثلاثة إلى إعداد “content security policy script src”، لكنها لم تعمل…

إعجابَين (2)
8

هل يمكنك تجربة هذا المكون بدلاً من ذلك؟

هذه طريقة أفضل لدمج مكتبات الطرف الثالث لتجنب مشكلات CSP.

ملاحظة: الغلاف مختلف؛ إنه ليس bbcode.

إعجابَين (2)
9

شكرا لك، @Arkshine
إنه يعمل!

إعجابَين (2)
10

إذا كنت راضيًا عن الرسوم البيانية الثابتة المفردة، فمن المحتمل أن يكون discourse-graphviz-theme-component كافيًا، ولكن إذا كنت ترغب في استخدام الانتقالات المتحركة بين الرسوم البيانية والتحكم في جوانب مختلفة من عرض الرسم البياني، فقد ترغب في تجربة D3 Graphviz Theme Component. يمكنك رؤيتها أثناء العمل على:

لا يلزم وضع قائمة بيضاء. هذا هو إعدادنا:

image
image1059×582 98.3 KB

إعجاب واحد (1)
11

مرحباً، @magjac
أود تجربة D3 الخاص بالرسوم المتحركة، لكنني واجهت المشكلة المذكورة أعلاه مع سياسة أمان المحتوى، هل هناك أي إعدادات يمكن تغييرها لجعلها تعمل؟
نسختنا الحالية هي 3.2.1. شكراً…

12

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

إعجاب واحد (1)