4.5 KiB
4.5 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fac367417b2b2512bdd | Use Dynamic Scales |
|
6 | Usa escalas dinámicas |
Description
min()
y max()
son útiles para ayudar a establecer la escala. Dado un conjunto de datos complejos, una prioridad es establecer la escala para que la visualización se ajuste al ancho y al alto del contenedor SVG. Desea que todos los datos se representen en el lienzo de SVG para que estén visibles en la página web. El siguiente ejemplo establece la escala del eje x para los datos del diagrama de dispersión. El método domain()
pasa información a la escala sobre los valores de datos sin procesar para el gráfico. El método range()
le proporciona información sobre el espacio real en la página web para la visualización. En el ejemplo, el dominio va de 0 al máximo en el conjunto. Utiliza el método max()
con una función de devolución de llamada basada en los valores de x en las matrices. El rango utiliza el ancho del lienzo de SVG ( w
), pero también incluye algunos rellenos. Esto pone espacio entre los puntos del diagrama de dispersión y el borde del lienzo SVG. conjunto de datos const = [El relleno puede ser confuso al principio. Represente el eje x como una línea horizontal de 0 a 500 (el valor de ancho para el lienzo SVG). La inclusión del relleno en el método
[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;
// Relleno entre el límite del lienzo SVG y la trama
relleno de const = 30;
const xScale = d3.scaleLinear ()
.dominio ([0, d3.max (conjunto de datos, (d) => d [0])])
.range ([relleno, w - relleno]);
range()
obliga a la trama a comenzar en 30 a lo largo de esa línea (en lugar de 0), y termina en 470 (en lugar de 500). Instructions
yScale
para crear una escala lineal del eje y. El dominio debe comenzar en cero e ir al valor máximo de y en el conjunto. El rango debe usar la altura SVG ( h
) e incluir el relleno. Nota Recuerda mantener la trama al revés. Cuando establece el rango para las coordenadas y, el valor más alto (altura menos relleno) es el primer argumento, y el valor más bajo es el segundo argumento.
Tests
tests:
- text: El texto en el <code>h2</code> debe ser 30.
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
- text: 'El <code>domain()</code> de yScale debe ser equivalente a <code>[0, 411]</code> .'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
- text: 'El <code>range()</code> de yScale debe ser equivalente a <code>[470, 30]</code> .'
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
Challenge Seed
<body>
<script>
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;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = undefined;
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
Solution
// solution required