Oliver Eyton-Williams ee1e8abd87
feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

2.4 KiB
Raw Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7fac367417b2b2512bdb 按比例设置域和范围 6 301491 set-a-domain-and-a-range-on-a-scale

--description--

默认情况下,比例尺使用同一关系(identity relationship),即输入值直接映射为输出值。但是比例尺可以更灵活更有趣。

假设有一个数据集范围为 50 到 480这是缩放比例尺的输入信息也被称为域(domain)。

你想沿着 x 轴将这些点映射到 SVG 画布上,位置介于 10 个单位到 500 个单位之间。这是输出信息,也被称为范围(range)。

domain()range() 方法设置比例尺的值,它们都接受一个至少有两个元素的数组作为参数。下面是一个例子:

// 设置域
// 域覆盖了一组输入值
scale.domain([50, 480]);
// 设置范围
// 范围覆盖了一组输出值
scale.range([10, 500]);
scale(50) // 返回 10
scale(480) // 返回 500
scale(325) // 返回 323.37
scale(750) // 返回 807.67
d3.scaleLinear()

注意,比例尺使用了域和范围之间的线性关系来找出给定数字的输出值。域中的最小值(50)映射为范围中的最小值(10)。

--instructions--

创建一个比例尺,将它的域设置为 [250, 500],范围设置为 [10, 150]

提示
你可以将 domain()range() 方法链在 scale 变量后。

--hints--

你应该使用 domain() 方法。

assert(code.match(/\.domain/g));

比例尺的 domain() 应该设置为 [250, 500]

assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));

你应该使用 range() 方法。

assert(code.match(/\.range/g));

比例尺的 range() 应该设置为 [10, 150]

assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));

h2 的文本应该为 -102。

assert($('h2').text() == '-102');

--seed--

--seed-contents--

<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>

--solutions--

<body>
  <script>
    const scale = d3.scaleLinear();
    scale.domain([250, 500])
    scale.range([10, 150])
    const output = scale(50);
    d3.select("body")
      .append("h2")
      .text(output);
  </script>
</body>