freeCodeCamp

5.8 KiB

Raw Blame History

id	title	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

5.8 KiB Raw Blame History