--- 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
```html ```
## Solution
```js // solution required ```