Files

3.6 KiB
Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7fab367417b2b2512bda Створення лінійної шкали за допомогою D3 6 301483 create-a-linear-scale-with-d3

--description--

Стовпчикові та розсіяні діаграми наносять дані безпосередньо на полотно SVG. Однак, якщо висота стовпчика або однієї з точок даних була б більшою за значення висоти або ширини SVG, то вона виходила б за межі області SVG.

У D3 існують шкали, за допомогою яких можна відобразити дані. scales - це функції, що вказують програмі, як саме потрібно зіставити пікселі полотна SVG із набором необроблених точок даних.

Наприклад, скажімо, у вас є полотно SVG розміром 100x500, і ви хочете накреслити Валовий внутрішній продукт (ВВП) для ряду країн. Набір цифр буде в діапазоні мільярдів або трильйонів доларів. Ви надаєте D3 тип шкали, щоб розповісти їй, як потрібно розмістити великі значення ВВП на цій площі розміром 100x500.

Навряд чи ви б створювали необроблені дані так. Перше ніж створювати його, ви встановлюєте шкалу для всього свого набору даних, щоб значення x та yвідповідали ширині та висоті полотна.

D3 має кілька типів шкал. Існує метод D3 scaleLinear() для лінійної шкали, який зазвичай використовується з кількісними даними:

const scale = d3.scaleLinear()

За замовчуванням шкала використовує зв'язок ідентичності. Значення вхідних даних таке ж, як і значення вихідних даних. В окремому завданні розповідається про те, як це змінити.

--instructions--

Щоб створити лінійну шкалу потрібно змінити змінну scale. Потім встановіть змінну output у шкалі, яка викликається з вхідним аргументом 50.

--hints--

У h2 текст повинен бути 50.

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

Ваш код повинен використовувати метод 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>