---
id: 587d7fa9367417b2b2512bce
title: Dynamically Set the Coordinates for Each Bar
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
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
```