---
id: 587d7fa9367417b2b2512bce
title: Dynamically Set the Coordinates for Each Bar
challengeType: 6
videoUrl: ''
localeTitle: ديناميكيا تعيين الاحداثيات لكل شريط
---
## Description
التحدي الأخير خلق وإلحاق مستطيل لعنصر svg لكل نقطة في dataset لتمثيل شريط. لسوء الحظ ، كلهم كانوا مكدسين فوق بعضهم البعض. يتم التعامل مع موضع المستطيل بواسطة سمات x و y . يخبرون D3 من أين تبدأ في رسم الشكل في منطقة svg . تحداهم الأخير وضع كل منهم على 0 ، لذلك تم وضع كل شريط في الزاوية العلوية اليسرى. بالنسبة إلى المخطط الشريطي ، يجب أن تكون جميع الأشرطة على نفس المستوى الرأسي ، مما يعني أن القيمة y تبقى كما هي (عند 0) لجميع الأشرطة. ومع ذلك ، يجب تغيير القيمة x عند إضافة أشرطة جديدة. تذكر أن القيم الأكبر x دفع العناصر إلى اليمين. أثناء التنقل خلال عناصر الصفيف في dataset ، يجب أن تزيد قيمة x. تقبل طريقة attr() في D3 وظيفة رد اتصال لتعيين تلك السمة ديناميكيًا. تأخذ وظيفة رد الاتصال وسيطتين ، واحدة لنقطة البيانات نفسها (عادةً d ) وواحدة لفهرس نقطة البيانات في الصفيف. الوسيطة الثانية للفهرس اختيارية. فيما يلي الشكل: selection.attr ("property"، (d، i) => {
/ *
* d هي قيمة نقطة البيانات
* i هو مؤشر نقطة البيانات في الصفيف
* /
})
من المهم ملاحظة أنك لست بحاجة إلى كتابة حلقة for أو استخدام forEach() للتكرار فوق العناصر الموجودة في مجموعة البيانات. تذكر أن طريقة data() بتوزيع مجموعة البيانات ، وأي طريقة يتم ربطها بعد تشغيل data() مرة واحدة لكل عنصر في مجموعة البيانات.
## Instructions
تغيير وظيفة رد الاتصال السمة x بحيث تقوم بإرجاع الفهرس مرات 30. ملاحظة
لكل شريط عرض 25 ، لذلك فإن زيادة كل قيمة x بمقدار 30 تضيف مسافة بين القضبان. أي قيمة أكبر من 25 ستعمل في هذا المثال.
## Tests
```yml
tests:
- text: يجب أن يكون rect الأول قيمة x تساوي 0.
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first rect should have an x value of 0.");'
- text: يجب أن يكون rect الثاني قيمة x 30.
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second rect should have an x value of 30.");'
- text: يجب أن يكون rect الثالث قيمة x تبلغ 60.
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third rect should have an x value of 60.");'
- text: يجب أن يكون لدى rect الرابع قيمة x لـ 90.
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth rect should have an x value of 90.");'
- text: يجب أن يكون rect الخامس قيمة x تبلغ 120.
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth rect should have an x value of 120.");'
- text: يجب أن يكون rect السادس قيمة x تبلغ 150.
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth rect should have an x value of 150.");'
- text: يجب أن يكون rect السابع قيمة x تبلغ 180.
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh rect should have an x value of 180.");'
- text: يجب أن يكون rect الثامن قيمة x 210.
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth rect should have an x value of 210.");'
- text: يجب أن يكون rect التاسع قيمة x 240.
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth rect should have an x value of 240.");'
```
## Challenge Seed
## Solution
```js
// solution required
```