تعلم كيفية إنشاء مخطط شريطي باستخدام D3 - برنامج تعليمي للمبتدئين

D3.js هي مكتبة JavaScript الأكثر شيوعًا لإنشاء تمثيلات مرئية لبياناتك. ومع ذلك ، فإن التعلم صعب بعض الشيء ، لذلك أعتقد أنه من المهم أن تبدأ بهدوء.

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء أول مخطط شريطي باستخدام D3. سوف يمنحك مقدمة لأهم المفاهيم ، بينما لا تزال تستمتع ببناء شيء ما.

لقد أنشأنا أيضًا دورة D3.js مجانية على Scrimba. تحقق من ذلك هنا.

لنبدأ الآن.

وانشاء

سنستخدم أبسط إعداد ممكن ، ببساطة استيراد مكتبة D3 من CDN.

سنكتب كود D3 الخاص بنا في علامة البرنامج النصي. ثانيًا ، أضفنا عنصرًا إلى DOM. إذا كنت ترغب في التلاعب بالكود أثناء قراءة هذا البرنامج التعليمي ، فراجع ملعب Scrimba ، الذي يحتوي على الإصدار الأخير من الكود.

أول شيء سنفعله هو تحديد هذا العنصر وتصميمه قليلاً.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

نعطيها عرضًا وارتفاعًا ، بالإضافة إلى .bar-chartفئة. في CSS الخاص بنا ، قمنا بتصميم الفصل على النحو التالي:

.bar-chart { background-color: #C7D9D9; } 

ها هي النتيجة:

الآن لدينا حاوية SVG لطيفة حيث يمكننا رسم مخططنا الشريطي. رمز القيام بذلك معقد بعض الشيء ، لذلك دعونا أولاً نلقي نظرة على الأمر برمته ثم ننتقل إلى كل خطوة:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

اختر الكل()

قد يبدو أول شيء نقوم به غريبًا بعض الشيء ، لكننا نقوم به .selectAll("rect")، ومع ذلك ، لم نقم بإنشاء أي عناصر بعد. لذا فإن هذه الطريقة تعيد تحديدًا فارغًا (مصفوفة فارغة). ومع ذلك ، سنقوم بإنشاء عناصر قريبًا باستخدام enter().append().

قد يبدو هذا محيرا بعض الشيء. لكن شرح كيفية selectAll()الجمع بين العمل enter().append()خارج نطاق هذا البرنامج التعليمي. إذا كنت تريد أن تفهمها بشكل صحيح ، فاقرأ هذه المقالة بعناية شديدة.

البيانات()

ثم نربط data()الطريقة ونمرر في مجموعة البيانات الخاصة بنا. ستنتهي البيانات بإملاء ارتفاع كل شريط.

أدخل()

الخطوة التالية هي ربط enter()الطريقة. و enter()يبدو كل من مجموعة البيانات التي تم تمريرها إلى data()  و في اختيار فعلنا مع selectAll('rect')، وبعد ذلك يحاول البحث عن "المباريات". لذلك يقوم بإنشاء مخطط بين بياناتك و DOM.

لكن تذكر أن selectAll('rect')الطريقة أعادت تحديدًا فارغًا ، حيث لا توجد عناصر في DOM حتى الآن. ومع ذلك ، تحتوي مجموعة البيانات على تسعة عناصر. لذلك لا توجد "مباريات".

على enter()طريقة ثم يسمح لك لخلق الجديد عنصر في DOM لكل عنصر في مجموعة البيانات التي ليس لديها بعد المقابلة عنصر.

ألحق()

في السطر التالي ، نلحق عنصرًا لكل عنصر. كما تتبع هذه الطريقة بعد enter()ذلك ، سيتم تنفيذها فعليًا تسع مرات ، واحدة لكل نقطة بيانات تفتقر إلى المقابل في DOM.

Attr ()

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

لنبدأ بالموضع y:

.attr("y", function(d) { return svgHeight - d }) 

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

هنا ، نحصل على وصول إلى نقطة البيانات في هذه الخطوة من عملية التكرار (تذكر ، يتم استدعاء هذه الطريقة مرة واحدة لكل عنصر في datasetالمصفوفة). يتم تخزين نقطة البيانات في dالوسيطة. سنطرح بعد ذلك نقطة البيانات المعطاة d، من ارتفاع حاوية SVG.

يتم دائمًا حساب إحداثيات X و y بدءًا من الزاوية اليسرى العليا. لذلك عندما نطرح ارتفاع الحاوية dبالقيمة ، نحصل على إحداثيات y لأعلى الشريط.

لجعل الشريط يمتد من هذه النقطة إلى أسفل إلى أسفل حاوية SVG ، سنحتاج إلى منحه ارتفاعًا مكافئًا لقيمة نقطة البيانات:

.attr("height", function(d) { return d; }) 

الخطوة التالية هي منحها عرضًا:

.attr ("width"، barWidth - barPadding)

هنا ، نقوم ببساطة بتمرير تعبير بسيط بدلاً من وظيفة رد الاتصال ، لأننا لا نحتاج إلى الوصول إلى نقطة البيانات. نحن ببساطة نأخذ أساسًا في barWidthالمتغير الذي أنشأناه بشكل أكبر ، وهو العرض الإجمالي للحاوية مقسومًا على عدد الأشرطة. من أجل الحصول على فجوة صغيرة بين كل شريط ، سنطرح أيضًا مساحة الحشو ، التي حددناها على أنها 5.

الخطوة الأخيرة هي تحديد إحداثيات x. هذا التعبير أكثر تعقيدًا:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

هنا ، نستفيد أولاً من المعامل الثاني في رد النداء ، i. هذا هو فهرس العنصر المحدد في المصفوفة.

لتعيين إحداثيات كل شريط ، سنضرب المؤشر barWidthبالمتغير. سنعيد بعد ذلك قيمة سلسلة تصف تحويل المحور x ، على سبيل المثال "translate(100)". سيؤدي ذلك إلى دفع الشريط 100 بكسل إلى اليمين.

وبهذه الطريقة ، لديك أول مخطط شريطي لك في D3.js.

إذا كنت مهتمًا بمعرفة المزيد عن D3.js ، فتأكد من مراجعة دورتنا المجانية على Scrimba.

شكرا للقراءة! اسمي بير بورجن ، أنا المؤسس المشارك لـ Scrimba - أسهل طريقة لتعلم البرمجة. يجب عليك التحقق من المعسكر التدريبي لتصميم الويب سريع الاستجابة إذا كنت تريد تعلم كيفية إنشاء موقع ويب حديث على مستوى احترافي.