freeCodeCamp

2.9 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

587d7fab367417b2b2512bda

Create a Linear Scale with D3

src
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js

Crie uma escala linear com D3

Description

A barra e o gráfico de dispersão mapeiam os dados plotados diretamente na tela do SVG. No entanto, se a altura de uma barra ou um dos pontos de dados fosse maior que os valores de altura ou largura do SVG, ela sairia da área SVG. Na D3, existem escalas para ajudar a traçar dados. Scales são funções que informam ao programa como mapear um conjunto de pontos de dados brutos para os pixels da tela do SVG. Por exemplo, digamos que você tenha uma tela SVG de tamanho 100x500 e deseja plotar o Produto Interno Bruto (PIB) para vários países. O conjunto de números estaria na faixa de bilhões ou trilhões de dólares. Você fornece a D3 um tipo de escala para informar como colocar os grandes valores do PIB nessa área de 100 x 500. É improvável que você planeje dados brutos como estão. Antes de plotar, você define a escala para todo o seu conjunto de dados, de modo que os valores x e y ajustem à largura e altura da tela. O D3 possui vários tipos de escala. Para uma escala linear (geralmente usada com dados quantitativos), existe o método D3 scaleLinear() : const scale = d3.scaleLinear() Por padrão, uma escala usa o relacionamento de identidade. O valor da entrada é o mesmo que o valor da saída. Um desafio separado cobre como mudar isso.

Instructions

Altere a variável de scale para criar uma escala linear. Em seguida, defina a variável de output para a escala chamada com um argumento de entrada de 50.

Tests

tests:
  - text: O texto no <code>h2</code> deve ser 50.
    testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
  - text: Seu código deve usar o método <code>scaleLinear()</code> .
    testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
  - text: A variável de <code>output</code> deve chamar <code>scale</code> com um argumento de 50.
    testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'

Challenge Seed

<body>
  <script>
    // Add your code below this line

    const scale = undefined; // Create the scale here
    const output = scale(); // Call the scale with an argument here

    // Add your code above this line

    d3.select("body")
      .append("h2")
      .text(output);

  </script>
</body>

Solution

// solution required

2.9 KiB Raw Blame History