---
id: 587d7fac367417b2b2512bdd
title: Use Dynamic Scales
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Использование динамических весов
---
## Description
Методы D3 min()
и max()
полезны, чтобы помочь установить масштаб. Учитывая сложный набор данных, одним из приоритетов является установка масштаба, чтобы визуализация соответствовала ширине и высоте контейнера SVG. Вы хотите, чтобы все данные отображались внутри холста SVG, чтобы они были видны на веб-странице. В приведенном ниже примере задана шкала по оси X для данных графика разброса. Метод domain()
передает информацию в шкалу о значениях необработанных данных для графика. Метод range()
дает ему информацию о фактическом пространстве на веб-странице для визуализации. В этом примере домен переходит от 0 к максимуму в наборе. Он использует метод max()
с функцией обратного вызова, основанной на значениях x в массивах. Диапазон использует ширину холста SVG ( w
), но также включает в себя некоторые дополнения. Это помещает пространство между точками графика рассеяния и краем холста SVG. const dataset = [
[34, 78],
[109, 280],
[310, 120],
[79, 411],
[420, 220],
[233, 145],
[333, 96],
[222, 333],
[78, 320],
[21, 123]
];
const w = 500;
const h = 500;
// Заполнение между границей холста SVG и графиком
const padding = 30;
const xScale = d3.scaleLinear ()
.domain ([0, d3.max (набор данных, (d) => d [0])])
.range ([padding, w - padding]);
Сначала заполнение может сбивать с толку. Отобразите ось x как горизонтальную линию от 0 до 500 (значение ширины для холста SVG). Включение дополнения в метод range()
заставляет график начинаться с 30 по этой линии (вместо 0) и заканчиваться на 470 (вместо 500).
## Instructions
Используйте переменную yScale
для создания линейной шкалы оси y. Домен должен начинаться с нуля и перейти к максимальному значению y в наборе. Диапазон должен использовать высоту SVG ( h
) и включать прокладку. Заметка
Не забудьте сохранить сюжет правой стороны. Когда вы устанавливаете диапазон для координат y, более высокое значение (высота минус заполнение) является первым аргументом, а нижним значением является второй аргумент.
## Tests
```yml
tests:
- text: Текст в h2
должен быть 30.
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the h2
should be 30.");'
- text: 'domain()
yScale должен быть эквивалентен [0, 411]
.'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The domain()
of yScale should be equivalent to [0, 411]
.");'
- text: ''
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The range()
of yScale should be equivalent to [470, 30]
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```