3.2 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7fab367417b2b2512bda	إنشاء مقياس خطي مع D3	6	301483	create-a-linear-scale-with-d3

--description--

يملأ البيانات المرسومة كل من مخطط بياني شريطي وانسياب (النِّقَاط المبعثرة) على لوحة SVG قاصدًا. بيد أنه إذا كان ارتفاع الشريط أو إحدى نِقَاط البيانات أكبر من الارتفاع أو العرض SVG، ستذهب خارج نطاق SVG.

في D3، هناك مقاييس للمساعدة في ملأ البيانات. تكون scales وظائف (functions) تخبر البرنامَج كيفية ملأ مجموعة من نِقَاط البيانات الخام على البكسلات (px) في لوحة SVG.

على سبيل المثال، قل أن لديك لوحة SVG بحجم 100x500، وأنت تريد ملأ الناتج إجمال المحلي (Gross Domestic Product) لعدد من الدول. ومجموعة الأعداد ستكون في حدود المليار أو تريليون دولار. يمكنك توفير D3 من المقياس لمعرفة كيفية وضع قيم الناتج المحلي الإجمالي الكبيرة في تلك المساحة 100x500.

من غير المحتمل أن تملأ البيانات الخام كما هي. قبل الملأ، عيّن المقياس لكامل مجموعتك للبيانات. بحيث أن قيم x و y تتناسب مع عرض وطول اللوحة.

ولدى D3 عدة أنواع من المقاييس. للحصول على مقياس خطي (linear scale) (يستخدم عادة مع البيانات الكمية (quantitative data))، هناك طريقة في D3 تسمى scaleLinear():

const scale = d3.scaleLinear()

بشكل افتراضي، يستخدم المقياس عَلاقة الهُوِيَّة (identity relationship). تطابق قيمة المدخل (Input) قيمة المخرج (output). يشمل تحد أخر كيفية تغيير ذلك.

--instructions--

تغيير متغير (variable) مسمى scale لإنشاء مقياس خطي (linear scale). ثم عيّن متغير (variable) مسمى output إلى scale, الذي فعلته بالإدخال وسيط بقيمة 50.

--hints--

يجب أن يكون النص في h2 بقيمة 50.

assert($('h2').text() == '50');

يجب أن يستخدم كودك طريقة (method) تسمى scaleLinear().

assert(code.match(/\.scaleLinear/g));

يجب أن يُفاعِل متغير output وظيفة scale مع وسيط 50.

assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));

--seed--

--seed-contents--

<body>
  <script>
    // Add your code below this line

    const scale = undefined; // Create the scale here
    const output = scale(); // Call scale with an argument here

    // Add your code above this line

    d3.select("body")
      .append("h2")
      .text(output);

  </script>
</body>

--solutions--

<body>
  <script>

    const scale = d3.scaleLinear();
    const output = scale(50); 

    d3.select("body")
      .append("h2")
      .text(output);

  </script>
</body>

3.2 KiB Raw Blame History