--- id: 587d7fa9367417b2b2512bd0 title: Invert SVG Elements required: - src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js' challengeType: 6 videoUrl: '' localeTitle: عكس عناصر SVG --- ## Description
ربما لاحظت أن المخطط الشريطي يبدو كما لو كان مقلوبًا أو مقلوبًا. هذا بسبب كيفية استخدام SVG للإحداثيات (x، y). في SVG ، تكون نقطة الأصل للإحداثيات في الزاوية العلوية اليسرى. يقوم إحداثي x من 0 بوضع شكل على الحافة اليسرى لمنطقة SVG. تقوم إحداثي y من 0 بوضع شكل على الحافة العلوية لمنطقة SVG. تدفع قيم x الأعلى المستطيل إلى اليمين. تدفع قيم y الأعلى المستطيل لأسفل. لجعل القضبان في الجانب الأيمن ، تحتاج إلى تغيير الطريقة التي يتم بها حساب الإحداثي y . ويحتاج إلى حساب كل من ارتفاع الشريط والارتفاع الكلي لمنطقة SVG. ارتفاع منطقة SVG هو 100. إذا كان لديك نقطة بيانات من 0 في المجموعة ، فإنك تريد أن يبدأ الشريط في الجزء السفلي من منطقة SVG (وليس أعلى). للقيام بذلك ، يحتاج تنسيق y إلى قيمة 100. إذا كانت قيمة نقطة البيانات 1 ، فستبدأ y لـ 100 لتعيين الشريط في الأسفل. ثم تحتاج إلى حساب ارتفاع شريط 1 ، بحيث يكون التنسيق y النهائي هو 99. إن إحداثي y الذي هو y = heightOfSVG - heightOfBar قد يضع القضبان في الجانب الأيمن لأعلى.
## Instructions
تغيير وظيفة رد الاتصال للسمة y لتعيين القضبان الجانب الأيمن لأعلى. تذكر أن height الشريط 3 أضعاف قيمة البيانات d . ملحوظة
بشكل عام ، العلاقة هي y = h - m * d ، حيث m هو الثابت الذي يقوم بتحجيم نقاط البيانات.
## Tests
```yml tests: - text: يجب أن يكون rect الأول قيمة y تبلغ 64. testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first rect should have a y value of 64.");' - text: يجب أن يكون rect الثاني قيمة y 7. testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second rect should have a y value of 7.");' - text: '' testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third rect should have a y value of 34.");' - text: '' testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth rect should have a y value of 49.");' - text: '' testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth rect should have a y value of 25.");' - text: '' testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth rect should have a y value of 46.");' - text: '' testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh rect should have a y value of 13.");' - text: '' testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth rect should have a y value of 58.");' - text: '' testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth rect should have a y value of 73.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```