---
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Добавление осей к визуализации
---
## Description
Другой способ улучшить график рассеяния - добавить ось x и ось y. D3 имеет два метода axisLeft()
и axisBottom()
для визуализации осей y и x соответственно. (Оси - это множественная форма оси). Ниже приведен пример создания оси x на основе xScale
в предыдущих задачах: const xAxis = d3.axisBottom(xScale);
Следующий шаг - отобразить ось на холсте SVG. Для этого вы можете использовать общий компонент SVG, элемент g
. Группа g
обозначает группу. В отличие от rect
, circle
и text
, ось является прямой линией, когда она отображается. Потому что это простая форма, используя g
works. Последний шаг - применить атрибут transform
для размещения оси на холсте SVG в нужном месте. В противном случае линия будет отображаться вдоль границы холста SVG и не будет видна. SVG поддерживает различные типы transforms
, но позиционирование оси требует translate
. Когда он применяется к элементу g
, он перемещает всю группу за и на указанные суммы. Вот пример: const xAxis = d3.axisBottom (xScale);
svg.append ( "г")
.attr ("transform", "translate (0," + (h - padding) + ")")
.call (Xaxis);
Вышеупомянутый код помещает ось x в нижнюю часть холста SVG. Затем он передается в качестве аргумента методу call()
. Ось y работает одинаково, за исключением того, что аргумент translate
имеет вид (x, 0). Поскольку translate
является строкой в методе attr()
выше, вы можете использовать конкатенацию для включения значений переменных для своих аргументов.
## Instructions
График рассеяния теперь имеет ось х. Создайте ось y в переменной с именем yAxis
используя метод axisLeft()
. Затем визуализируйте ось с помощью элемента g
. Не забудьте использовать атрибут transform
для перевода оси на количество единиц заполнения справа и 0 единиц вниз. Не забудьте call()
ось.
## Tests
```yml
tests:
- text: Ваш код должен использовать метод axisLeft()
с yScale
в качестве аргумента.
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the axisLeft()
method with yScale
passed as the argument.");'
- text: 'Элемент g
оси y должен иметь атрибут transform
для перевода оси по (60, 0).'
testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis g
element should have a transform
attribute to translate the axis by (60, 0).");'
- text: Ваш код должен вызывать yAxis
.
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the yAxis
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```