freeCodeCamp

3.0 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

587d7fac367417b2b2512bdb

Set a Domain and a Range on a Scale

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

在比例上设置域和范围

Description

默认情况下，缩放使用标识关系 - 输入值映射到输出值。但是尺度可以更加灵活和有趣。假设数据集的值范围为50到480.这是比例的输入信息，也称为域。您希望在SVG画布上沿x轴映射这些点，介于10个单位和500个单位之间。这是输出信息，也称为范围。 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变量。

Tests

tests:
  - text: 您的代码应使用<code>domain()</code>方法。
    testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
  - text: '比例的<code>domain()</code>应设置为<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: 您的代码应使用<code>range()</code>方法。
    testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
  - text: '刻度的<code>range()</code>应设置为<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: <code>h2</code>的文本应为-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.0 KiB Raw Blame History Unescape Escape