5.8 KiB
5.8 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa9367417b2b2512bce | Dynamically Set the Coordinates for Each Bar |
|
6 | ديناميكيا تعيين الاحداثيات لكل شريط |
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
tests:
- text: يجب أن يكون <code>rect</code> الأول قيمة <code>x</code> تساوي 0.
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
- text: يجب أن يكون <code>rect</code> الثاني قيمة <code>x</code> 30.
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
- text: يجب أن يكون <code>rect</code> الثالث قيمة <code>x</code> تبلغ 60.
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
- text: يجب أن يكون لدى <code>rect</code> الرابع قيمة <code>x</code> لـ 90.
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
- text: يجب أن يكون <code>rect</code> الخامس قيمة <code>x</code> تبلغ 120.
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
- text: يجب أن يكون <code>rect</code> السادس قيمة <code>x</code> تبلغ 150.
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
- text: يجب أن يكون <code>rect</code> السابع قيمة <code>x</code> تبلغ 180.
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
- text: يجب أن يكون <code>rect</code> الثامن قيمة <code>x</code> 210.
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
- text: يجب أن يكون <code>rect</code> التاسع قيمة <code>x</code> 240.
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
Challenge Seed
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
Solution
// solution required