طريقة رسم دوائر تفاعلية ثلاثية الابعاد باستخدام زر (
التحديث ) , ما يتوجب عليك اتقانه لفهم المشروع هو فكرة عن كيفية استخدام
اللغة البرمجية HTML وكيفية التعديل على الملفات المتوفرة للتحميل . حيث قمنا في
مقالة سابقة بشرح طريقة رسم اعمدة بيانية باستخدا تقنية الـ D3 , بإمكانك رؤية مثال
حي للمشروع الموضح بالرسم اعلاه.
الشرح :-
في المثال ترتيب الدول الفائزة بالميداليات الذهبية و
الفضية و البرونزية ابتدا من 5/8/2012 حتى 8/8/2012 , ابرز ( 4 ) دول فائزة
بأولمبياد لندن 2012 بهذه الميداليات حتى تاريخه تم الاستعانة بالترتيب من الموقع الرسمي
LONDON2012.COM .
تحميل الملفات و التعديل:-
قمت برفع الملفات المستخدمة كما في المثال الموضح
وبإمكانكم تحميل جميع الملفات بالملف المضغوط هنا , ما عليكم فقط هو فك الضغط و
التعديل في محتوى كلاً من الملفين InteractivePieChart.html و example1.js ,
سأقوم بشرح ما يتوجب تغيره لإنشاء الرسم التفاعلي .
1- التعديل باللغة البرمجية بملف
InteractivePieChart.html :-
2- التعديل باللغة البرمجية ( البيانات ) بملف
example1.js :-
* بند json:
ثلاثة ألوان معنونة في التوضيح هي ما سيتم تغيره
بناء على الميداليات المتوفرة في اولمبياد لندن وهي الذهبية ( اللون
الأزرق ) و الفضية ( اللون الأخضر ) و البرونزية ( اللون البني ). التغيير هنا
هو بتاريخ ( 5/8/2012 ) إي ان البيانات المتواجده في هذا البند تعود إلى
التاريخ 5/8/2012 .
* بند json2:
أما التغيير في هذا البند هو لتبيان التغير في الفوز
بالميداليات بتاريخ 8/8/2012 , وذلك بعد النقر على زر ( التحديث ) , وسيتم تغير
الرسم بأسلوب ديناميكي .
