--- id: 587d7fad367417b2b2512bdf title: Додай вісь до візуалізації challengeType: 6 forumTopicId: 301472 dashedName: add-axes-to-a-visualization --- # --description-- Інший спосіб покращити точкову діаграму - додати x- значення та у- значення. D3 має два методи, `axisLeft()` та `axisBottom()`, щоб зобразити вісь y та вісь x відповідно. Ось приклад для створення осі Х на основі `xScale` у попередніх завданнях: ```js const xAxis = d3.axisBottom(xScale); ``` Наступний крок - візуалізувати вісь на полотні SVG. Для цього можна використати загальний компонент SVG, елемент `g`. Стрічка `g` відповідає за групу. На відміну від `rect`, `circle`, and `text` , вісь - це просто пряма лінія при відображенні. Оскільки це проста фігура, використовуючи `g` працює. Останній крок - застосувати атрибут `transform` для розміщення осі на полотні SVG в потрібному місці. В іншому випадку здійсниться лінія вздовж межі полотна SVG яка не буде видима. SVG підтримує різні типи `transforms`, але позиціювання осей потрібно `translate`. Коли елемент застосований до елемента `g` , він пересуне всю групу на задані кількості. Ось приклад: ```js const xAxis = d3.axisBottom(xScale); svg.append("g") .attr("transform", "translate(0, " + (h - padding) + ")") .call(xAxis); ``` Наведений вище код встановлює вісь х на нижній частині SVG полотна. Тоді він переданий в якості аргументу `call()`. Вісь Y працює так само, за винятком `translate` аргументу у вигляді `(x, 0)`. Тому що `translate` є рядком в методі `attr()` вище, ви можете використовувати конкатенацію для включення змінних значень для їх аргументів. # --instructions-- У точковому графіку тепер є вісь Х. Створіть вісь У в змінній `yAxis` використовуючи `axisLeft()` метод. Потім зобразіть вісь, використовуючи елемент `g`. Переконайтеся, що за допомогою `transform` атрибут для перекладу осі на кількість одиниць виконано вправо, та `0` одиниць вниз. Не забудьте встановити `call()` вісь. # --hints-- Ваш код повинен використовувати метод `axisLeft()` з `yScale` в якості аргументу. ```js assert(code.match(/\.axisLeft$yScale$/g)); ``` Елемент осі Y `g` повинен мати атрибут `transform` для перекладу осі на `(60, 0)`. ```js assert( $('g') .eq(10) .attr('transform') .match(/translate$60\s*?,\s*?0$/g) ); ``` Ваш код повинен містити один теґ `audio`. ```js assert(code.match(/\.call$\s*yAxis\s*$/g)); ``` # --seed-- ## --seed-contents-- ```html ``` # --solutions-- ```html ```