---
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: Use escalas dinâmicas
---
## Description
Os métodos D3 min()
e max()
são úteis para ajudar a definir a escala. Dado um conjunto de dados complexo, uma prioridade é definir a escala para que a visualização se ajuste à largura e altura do contêiner do SVG. Você deseja que todos os dados sejam plotados na tela do SVG para que fiquem visíveis na página da web. O exemplo abaixo define a escala do eixo x para os dados do gráfico de dispersão. O método domain()
passa informações para a escala sobre os valores de dados brutos para o gráfico. O método range()
fornece informações sobre o espaço real na página da web para a visualização. No exemplo, o domínio vai de 0 ao máximo no conjunto. Ele usa o método max()
com uma função de retorno de chamada com base nos valores x nas matrizes. O intervalo usa a largura da tela do SVG ( w
), mas também inclui alguns preenchimentos. Isso coloca espaço entre os pontos do gráfico de dispersão e a borda da tela do SVG. conjunto de dados const = [
[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;
// Preenchimento entre o limite de tela do SVG e o enredo
preenchimento const = 30;
const xScale = d3.scaleLinear ()
.domain ([0, d3.max (dataset, (d) => d [0])])
.range ([padding, w - padding]);
O preenchimento pode ser confuso no início. Imagine o eixo x como uma linha horizontal de 0 a 500 (o valor da largura para a tela do SVG). Incluir o preenchimento no método range()
força o gráfico a iniciar em 30 ao longo dessa linha (em vez de 0) e terminar em 470 (em vez de 500).
## Instructions
Use a variável yScale
para criar uma escala linear no eixo y. O domínio deve começar em zero e ir para o valor máximo y no conjunto. O intervalo deve usar a altura do SVG ( h
) e incluir preenchimento. Nota
Lembre-se de manter o enredo com o lado direito para cima. Quando você define o intervalo para as coordenadas y, o valor mais alto (altura menos preenchimento) é o primeiro argumento e o valor inferior é o segundo argumento.
## Tests
```yml
tests:
- text: O texto no h2
deve ser 30.
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the h2
should be 30.");'
- text: 'O domain()
de yScale deve ser equivalente a [0, 411]
.'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The domain()
of yScale should be equivalent to [0, 411]
.");'
- text: 'O range()
de yScale deve ser equivalente a [470, 30]
.'
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
```