D3 هي مكتبة مرئية JS تعتمد على عمليات البيانات. لفهم D3 ، نبدأ بعرض أساسي للبيانات القابلة للتحميل.
لن أقول الكثير عن الإطار الأساسي لـ HTML ، سأضع الرمز أولاً ثم شرحه:
قم بإنشاء دليل اختبار جديد وقم بإنشاء تجريبيين مجلدين و D3 ضمن هذا الدليل. يقوم التجريبي بتخزين ملف HTML المراد كتابته ، و D3 Stores D3.v3.js
قم بإنشاء indexp.html جديد ضمن المجلد التجريبي ، ونسخ الكود التالي ، وانقر نقرًا مزدوجًا لفتح التأثير في المتصفح.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> d3: قم بتعيين نمط الفقرات بشكل مشروط ، استنادًا إلى البيانات </title> <script type = "text/javascript" src = "../ d3/d3.v3. type = "text/javaScript"> var dataset = [5 ، 10 ، 15 ، 20 ، 25] ؛ d3.select ("body"). selecall ("p") .Data (DataSet) .enter () .Append ("p") .Text (function (d) {return "يمكنني الاعتماد على" + d ؛}) .style ("color" ، function (d) {if (d> 15) {عتبة 15) </script> </body> </html>الوظائف التي تنفذها هذا العرض التوضيحي البسيط هي: إضافة علامات P إلى الجسم ، وإضافة محتوى النص المحمّل بواسطة D3 في علامة P ، وضبط لون النص وفقًا لشروط إعداد الوظيفة.
رمز صفحة الويب أعلاه ورمز JS في الجسم هما عمليات بيانات معروضة على الصفحة. بالنسبة للعديد من الأمثلة في المستقبل ، ما عليك سوى تعديل هذا الجزء ، ويمكن اعتبار الأجزاء الأخرى كأطر صفحة.
تتحدث المقالة السابقة هنا عمومًا عن استخدام D3 Collunction لتوصيل عمليات البيانات خطوة بخطوة لنفس الكائن لسهولة الصيانة.
d3.select ("body") حدد عنصر الجسم وسلسه إلى الطريقة التالية
.selectall ("P") حدد كل الفقرات
. Data (DataSet) تخيل بيانات صفيف التحميل. طول الصفيف هو 5. سيتم تنفيذ كل طريقة متسلسلة خمس مرات في المستقبل. قم بإجراء عمليات الطريقة على عناصر الصفيف بالتسلسل وفقًا لمرحلة الصفيف.
. Enter () ينشئ عنصر العنصر النائب للبيانات المرتبطة الجديدة (أي ما يعادل إنشاء 5 علامات غير معروفة مؤقتًا).
يجب تحديد عدد الأرقام التي تم إنشاؤها بناءً على عدد العلامات الموجودة المحددة وطول صفيف البيانات المحملة.
كما في هذا المثال ، إذا كان هناك أقل من 5 علامات في الجسم ، فسيتم إنشاؤه (الآن P في الجسم هو 0 ، لذلك يتم إنشاء 5).
إذا لم يكن هناك أكثر مما لم يتم إنشاؤه ، فيجب أن يكون العدد الإجمالي لعنصر العنصر النائب الأخير وعنصر P 5.
.
.Text (الدالة (D) {}) اكتب وظيفة مجهولة للتحكم في محتوى العرض لكل فقرة ، وإرجاع السلسلة عمومًا. في هذه الطريقة يمكنك كتابتها على أي حال.
يتيح له هذا المثال الإخراج ، يمكنني الاعتماد على كل فقرة بالإضافة إلى قيمة عنصر الصفيف المقابل
تم إصلاح تنسيق الوظيفة. بهذه الطريقة فقط يمكن تحميل البيانات في الوظيفة.
.style ("Color" ، "") يعين سمة لون النص لـ CSS. مثل النص ، يمكن تنفيذ السلاسل المحددة مع وظيفة لتنفيذ العمليات التي تريدها. في هذا المثال ، إذا كانت القيمة الواردة المقابلة للفقرة أكبر من 15 ، فسيتحول الخط إلى اللون الأحمر
أخيرًا ، فإن التأثير الذي نراه كما هو موضح في الشكل:
هذه المقالة تنتهي مع هذا المقال. فيما يلي كيفية رسم الدوائر في SVG ومخطط قوة بسيط يربط الدوائر.