freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fac367417b2b2512bdb	Set a Domain and a Range on a Scale	6		Establecer un dominio y un rango en una escala

Description

De forma predeterminada, las escalas utilizan la relación de identidad: el valor de entrada se asigna al valor de salida. Pero las escalas pueden ser mucho más flexibles e interesantes. Supongamos que un conjunto de datos tiene valores que oscilan entre 50 y 480. Esta es la información de entrada para una escala y también se conoce como dominio. Desea asignar esos puntos a lo largo del eje x en el lienzo de SVG, entre 10 unidades y 500 unidades. Esta es la información de salida, que también se conoce como el rango. Los métodos domain() y range() establecen estos valores para la escala. Ambos métodos toman una matriz de al menos dos elementos como un argumento. Aquí hay un ejemplo:

// Establecer un dominio
// El dominio cubre el conjunto de valores de entrada.
dominio de escala ([50, 480]);
// establecer un rango
// El rango cubre el conjunto de valores de salida.
scale.range ([10, 500]);
escala (50) // Devoluciones 10
escala (480) // Devoluciones 500
escala (325) // Devoluciones 323.37
escala (750) // Devoluciones 807.67
d3.scaleLinear ()

Observe que la escala utiliza la relación lineal entre el dominio y los valores de rango para determinar cuál debe ser la salida para un número dado. El valor mínimo en el dominio (50) se asigna al valor mínimo (10) en el rango.

Instructions

Cree una escala y establezca su dominio en [250, 500] y alcance en [10, 150] . Nota
Puede encadenar los métodos de domain() y range() a la variable de scale .

Tests

tests:
  - text: Su código debe utilizar el método <code>domain()</code> .
    testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
  - text: 'El <code>domain()</code> de la escala se debe establecer en <code>[250, 500]</code> .'
    testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.");'
  - text: Su código debe utilizar el método <code>range()</code> .
    testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
  - text: 'El <code>range()</code> de la escala se debe establecer en <code>[10, 150]</code> .'
    testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.");'
  - text: El texto en el <code>h2</code> debe ser -102.
    testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'

Challenge Seed

<body>
  <script>
    // Add your code below this line
    const scale = d3.scaleLinear();



    // Add your code above this line
    const output = scale(50);
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>

Solution

// solution required

3.4 KiB Raw Blame History