开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的25天，点击查看活动详情

用 D3 创建线性比例

介绍

条形图和散点图都直接在 SVG 画布上绘制数据。但是，如果一组的高或者其中一个数据点比 SVG 的高或宽更大，它将跑到 SVG 区域外。

D3 中，比例尺可帮助布局数据。 scales 是函数，它告诉程序如何将一组原始数据点映射到 SVG 画布上。

例如，假设你有一个 100x500 大小的 SVG 画布，你想为许多国家绘制国内生产总值（GDP）的图表。这组数据将在十亿美元或万亿美元的范围内。你给 D3 提供一种缩放方法，告诉它如何将大的 GDP 值放置在 100x500 大小的区域。

你不太可能按数据原本的大小来绘制图表。在绘制之前，将整个数据集缩放，让 x 和 y 值适合画布的宽高。

D3 有几种缩放类型。对于线性缩放（通常使用于定量数据），使用 D3 的 scaleLinear() 方法：

const scale = d3.scaleLinear()

默认情况下，比例尺使用一对一关系（identity relationship）。输入的值和输出的值相同。后面的挑战将涉及如何改变默认比例。

实操

更改 scale 变量，以创建线性比例。然后将 output 变量设置为 scale 函数，调用函数时传入参数 50。

h2 的文本应为 50。
应使用 scaleLinear() 方法。
output 变量应调用 scale，传入参数 50。

<body>
  <script>
  
    const scale = d3.scaleLinear(); 
    const output = scale(50); 

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

  </script>
</body>

按比例设置域和范围

介绍

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

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

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

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

scale.domain([50, 480]);
scale.range([10, 500]);
scale(50)
scale(480)
scale(325)
scale(750)
d3.scaleLinear()

按顺序，将在控制台中显示以下值：10、500、323.37 和 807.67。

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

实操

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

注意： 你可以将 domain() 和 range() 方法串联在 scale 变量后。

注意： 你可以尝试修改const output = scale(50); ,将 50 修改为，250或者500或者其他值观察规律。

应使用 domain() 方法。
scale 的 domain() 应为 [250, 500]。
应使用 range() 方法。
scale 的 range() 应为 [10, 150]。
h2 的文本应为 -102。

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

用 D3 创建线性比例 & 按比例设置域和范围

用 D3 创建线性比例

介绍

实操

按比例设置域和范围

介绍

实操