تجميع عناصر SVG معًا في D3 Js

D3.js هي مكتبة JavaScript قوية لمعالجة المستندات بناءً على البيانات. غالبًا ما يتم استخدامه لإنشاء تصورات تفاعلية للبيانات على الويب. أحد الأشياء الرائعة في d3.js هو أنه يقدم مجموعة متنوعة من الطرق لإنشاء عناصر SVG ومعالجتها. إحدى الطرق التي يمكنك من خلالها معالجة عناصر SVG هي تجميعها معًا. يمكن أن يكون هذا مفيدًا لأسباب عديدة ، مثل تسهيل تطبيق أنماط معينة على مجموعة من العناصر ، أو لجعل الرسوم المتحركة أكثر كفاءة. في هذه المقالة ، سنلقي نظرة على كيفية تجميع عناصر SVG معًا في d3.js.

تُسهل الرسومات المتجهة القابلة للتطوير (SVG) تصور ما تريده وتمنحك مزيدًا من التحكم في ما يمكنك إنجازه. تحتوي عناصر SVG على مجموعة الخصائص الخاصة بها ، بما في ذلك الهندسة والأسلوب. كما هو الحال مع عناصر HTML ، يمكننا استخدام Attr والإلحاق وقتما نريد لأن SVG مضمن في DOM. يحدد المثال التالي إحداثيات الأصل بالإضافة إلى عرض المستطيل وارتفاعه ، بالإضافة إلى عنصر مستطيل بإحداثيات x و y. من خلال إلحاق عنصر خط إلى SVG الخاص بنا واستخدام وظيفة Attr ، يمكننا توفير سمات x1 و y1 و x2 و y2 و Stroke. عندما تختلف إحداثيات y بين السطور ، يمكننا الحصول على تدرج بنفس الخط. يمكنك تضمين عنصر في SVG ، مثل عنصر النص.

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

من الممكن دمج رسومات SVG باستخدام تنسيق SVG . هناك احتمال أن عنصر “* svg>” يمكن وضعه داخل عنصر آخر.

ما المقصود بـ Svg في D3js؟

SVG ، أو Scalable Vector Graphics ، هي طريقة قياسية لتمثيل الرسومات المتجهة ثنائية الأبعاد على الويب. D3.js هي مكتبة JavaScript لمعالجة المستندات بناءً على البيانات. يستخدم D3.js SVG لإنشاء تصورات تفاعلية وسريعة الاستجابة .

بعبارات بسيطة ، الرسومات المتجهة هي Scalable Vector Graphics (SVG). XML هو تنسيق الرسومات الافتراضي. يمكن استخدامه لرسم الخطوط والمستطيلات والدوائر والأشكال البيضاوية وما إلى ذلك. لإنشاء مثال ، ما عليك سوى اتباع الخطوات أدناه. تم تعريف مستطيل بسيط في هذا الفيديو من خلال شرح تعريفه. يمكن إنشاء المستطيل الموضح أدناه ديناميكيًا. يتم وصف خصائص الدائرة بالتفصيل أدناه ، بالإضافة إلى علامة الدائرة.

ما هي أهمية Svg و Dom في D3؟

SVG و DOM نوعان من التقنيات الهامة المستخدمة في D3. يتم استخدام SVG لإنشاء رسومات متجهة يمكن تغيير حجمها إلى أي حجم دون فقدان الجودة. يستخدم DOM لإنشاء مستندات HTML و XML ومعالجتها. تتيح هذه التقنيات معًا لـ D3 إنشاء تصورات تفاعلية للبيانات يمكن استخدامها في أي صفحة ويب.

هل تستخدم D3 Canvas أو Svg؟

يستخدم D3 كلاً من SVG و Canvas لرسم الرسومات. يتم استخدام SVG لرسم رسومات متجهة ، بينما يتم استخدام Canvas لرسم رسومات تعتمد على البكسل.

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

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

من يستخدم D3js؟

تتم معالجة المستند المستند إلى البيانات باستخدام js ، مكتبة JavaScript المستخدمة في المستندات. في هذا التطبيق ، يمكن تمثيل البيانات بشكل مرئي باستخدام HTML و CSS و SVG ، والتي يمكن عرضها بعد ذلك في أي متصفح حديث. هناك أيضًا بعض الرسوم المتحركة والتفاعلات المذهلة التي تأتي بشكل قياسي مع النظام.

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

الهدف من هذه المقالة هو توفير أساس متين من المعرفة لمساعدتك في فهم التصور الأكثر تعقيدًا لـ D3 . سوف تتعلم كيفية إنشاء تطبيق SVG ، و DOM ، وسلسلة أسلوب ، وتطبيق تصميم CSS. سنوفر موارد إضافية إذا كنت تريد معرفة المزيد من التفاصيل حول هذا الموضوع.

قبل أن تبدأ العمل على تصميم الرسوم البيانية المستند إلى البيانات ، يجب عليك أولاً مراعاة هذه العوامل الثلاثة. ما هي البيانات التي لديك؟ ما هو الشيء الذي تريد عرضه؟ كيف يمكنك إعداد ربط البيانات؟ في D3 ، يمكنك ربط البيانات بـ DOM ثم تطبيق عمليات التحويل التي تعتمد على البيانات على المستند. يجعل D3.js من السهل الحصول على البيانات التي تحتاجها وعرضها بالطريقة التي تطلبها ؛ يمكنك إنشاء جداول HTML أو مخططات SVG أو حتى تطبيقات تفاعلية باستخدام D3.js.

SVG جزء

يُستخدم عنصر svg لتجميع العناصر ذات الصلة معًا. يتم عرض جميع العناصر الفرعية للعنصر معًا. غالبًا ما يستخدم العنصر لتجميع أشكال SVG معًا.