SVG و D3 Js: التركيبة المثالية للرسومات المتجهة التي تعتمد على البيانات

SVG ، أو Scalable Vector Graphics ، هو تنسيق صورة متجه مستند إلى XML للرسومات ثنائية الأبعاد مع دعم للتفاعلية والرسوم المتحركة. مواصفات SVG هي معيار مفتوح تم تطويره بواسطة World Wide Web Consortium (W3C) منذ عام 1999. D3.js هي مكتبة JavaScript لمعالجة المستندات بناءً على البيانات. يساعدك D3 على إضفاء الحيوية على البيانات باستخدام HTML و SVG و CSS. يمنحك تركيز D3 على معايير الويب الإمكانات الكاملة للمتصفحات الحديثة دون تقييد نفسك بإطار عمل احتكاري. SVG هو التنسيق القياسي لتخزين الرسومات المتجهة على الويب. الرسومات المتجهة هي نوع من الرسوم التي تستخدم المعادلات الرياضية لرسم الصورة ، بدلاً من شبكة من وحدات البكسل. هذا يعني أنه يمكن تغيير حجمها إلى أي حجم دون فقدان الجودة. يمكن استخدام D3.js لإنشاء رسومات متجهية تفاعلية تعتمد على البيانات. هذا يعني أنه يمكن إنشاء الرسومات باستخدام بيانات من مجموعة متنوعة من المصادر ، مثل ملفات CSV أو بيانات JSON أو حتى البيانات الحية من واجهة برمجة تطبيقات الويب. يدعم D3.js أيضًا الرسوم المتحركة ، بحيث يمكنك إنشاء رسومات ديناميكية وتفاعلية تتغير بمرور الوقت.

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

الطريقة الأكثر شيوعًا لعرض مخططات D3 هي استخدام SVG ، وهو نموذج رسومي سهل الاستخدام ، ولكنه ليس شديد الاستجابة. في معظم الحالات ، يمكن لمخططات SVG التعامل مع حوالي 1000 نقطة بيانات. Canvas هو نموذج رسومي للوضع الفوري يُستخدم في D3 v4 ، مما يعني أنه يمكنك الآن عرض المخططات باستخدامه.

يمكنك إنشاء خط فني رائع باستخدام SVG. يتسع بشكل جيد للشاشات الكبيرة ذات DPI عالية جدًا دون استخدام الكثير من النطاق الترددي. في حين أنه يوفر آليات لتطبيق تحويل المنظور وإزالة الأسطح المخفية ، إلا أنه لم يتم تصميمه لـ 3D.

ما يفعله HTML في الرسومات ، كما هو الحال في الرسومات ، هو بالضبط ما يفعله SVG في النص. تحتوي ملفات XML النصية على تعريفات لصور SVG والسلوكيات المرتبطة بها ، مما يسمح بالبحث عنها وفهرستها وبرمجتها وضغطها. يمكن رسمها أو تلوينها أو حتى تحريرها باستخدام أي محرر نصوص أو برنامج رسم.

هل D3 Svg قائم؟

نعم ، d3 يعتمد على svg. يرمز D3 إلى المستندات المستندة إلى البيانات ويستخدم معايير الويب مثل svg و html و css و javascript لإنشاء تصورات بيانات تفاعلية وديناميكية في المستعرض.

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

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

ما هو استخدام Dom و Svg في D3؟

نموذج كائن المستند (DOM) هو واجهة مشتركة بين الأنظمة الأساسية ومستقلة عن اللغة تتعامل مع مستند XML أو HTML على أنه هيكل شجرة حيث تكون كل عقدة كائنًا يمثل جزءًا من المستند. يحدد SVG DOM واجهات التفاعل مع عناصر الرسومات المتجهة مثل الأشكال والنص والتدرجات والأنماط.

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

إذا كانت العناصر موجودة بالفعل ومرتبطة بالبيانات ، فإننا نحدد خيار التحديث. تقوم هذه الطريقة بتحديث عناصر DOM الموجودة بالبيانات الجديدة ولكنها لا تزيل أو تضيف أي عناصر. عندما يفوق عدد عناصر مجموعة البيانات عدد عناصر DOM ، يتم استخدام تحديد الخروج. يمكن الآن استخدام طريقة الإزالة الخاصة بـ D3 لإزالة هذه العناصر.

ما هي علامة Svg المستخدمة؟

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

وهي عبارة عن تنسيق صورة منظم بلغة التوصيف الموسعة (XML) لإنشاء صور على نطاق الويب في شكل ملف XML. على عكس تنسيقات الصور المستندة إلى البكسل ، والتي يمكن زيادتها أو تصغيرها إلى أي بُعد دون التقليل من الجودة ، فإن SVGs هي تنسيق رسومات يعتمد على المتجهات. يمكن تكبيرها لتلائم شاشات العرض المتنوعة ذات الكثافة العالية ، وطباعتها بشكل أكثر وضوحًا ، وتحسين الاستجابة. يتم حساب قيمة خاصية viewBox بضرب القيمة في قيمة min-x و min-y والعرض والارتفاع. وفقًا لقاعدة saveAspectRatio ، يجب أن يكون عنصر viewBox في منفذ عرض بنسبة عرض إلى ارتفاع مختلفة عن عنصره. يمكنك تحديد لغة ورقة الأنماط لجزء من المستند باستخدام contentStyleType. هناك ثلاثة أنواع من كائنات الرسوم المتوفرة في SVG: التحويلات المتداخلة ومسارات القطع وأقنعة ألفا وتأثيرات المرشح وكائنات القوالب.

يمكن استخدام HTML لعرض الصور من ملف sva بعدة طرق. يُفترض على نطاق واسع أن HTML هي XHTML ، وهي إحدى لغات XML التي تحتوي على قيود بناء جملة أقل صرامة من لغة XML. يمكن إنشاء شكل بوضع عنصر في قسم HTML / CSS. يتم وصف كل شكل باستخدام معلمات مختلفة لحجمه وموضعه. تتكون الخطوط المتعددة ، مثل أشكال المضلعات ، من مقاطع متصلة ببعضها البعض. نظرًا لأن SVGs أصبحت أكثر استخدامًا في المتصفحات ، تظهر الصورة عالية الجودة بتنسيق أكثر جاذبية. كلما زاد حجم الملف ، زادت سرعة تحميل الصورة على موقع الويب الخاص بك باستخدام SVGs. يمكن استخدام CSS و / أو JavaScript لتحرير وتحريك SVGs بسهولة. نظرًا لأنها أسهل في الاستخدام من JPG و JPEG و PNG ، يمكن استخدامها في التصميم سريع الاستجابة.

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