在数据可视化中，Y 轴的范围是非常重要的。适当设置 Y 轴的范围可以使数据更加清晰地呈现，并且能够避免误导用户。本文将介绍如何使用 d3.js 和 nvd3.js 设置 Y 轴的范围。
d3.js
线性比例尺（Linear Scale）
使用线性比例尺可以将数值范围映射到给定的输出范围。下面是一个基础的例子：
-- ----- ----- ------ - ---------------- ----------- -------------- --------------- ---- -- -- - - ----- ----- - -------------------- -- -- - -- --- --------------- -------------
在上面的代码中，d3.max(data) 返回数组 data 中的最大值，height 是 SVG 的高度。这个代码片段会将数值范围 [0, d3.max(data)] 映射到 [height, 0] 输出范围中。这里的 [height, 0] 表示 Y 轴从上到下的位置范围。
如果想要修改 Y 轴的范围，只需要修改 yScale 中的 domain 参数即可。例如，将 domain 改为 [0, 100] 表示 Y 轴的范围为 0 到 100。
对数比例尺（Log Scale）
如果数据呈现指数增长或者指数衰减的趋势时，可以使用对数比例尺来更好地呈现相关信息。下面是一个基础的例子：
-- ----- ----- ------ - ------------- ----------- -------------- --------------- ---- -- -- - - ----- ----- - -------------------- -- -- - -- --- --------------- -------------
在上面的代码中，d3.scaleLog() 表示创建一个对数比例尺。domain 中的 [1, d3.max(data)] 表示数据的取值范围从 1 开始，以免出现取对数值无穷大的情况。如果想要修改对数比例尺的底数，可以使用 .base() 方法。
nvd3.js
nvd3.js 是基于 d3.js 的一个高级图表库。它提供了许多内置的图表类型，例如线图、柱状图、散点图等，并且支持与 d3.js 相关的 API。下面是如何使用 nvd3.js 设置 Y 轴的范围。
在 nvd3.js 中，可以通过指定 chart.yDomain() 来设置 Y 轴的范围。例如，下面是一个基础的例子：
-- ---- ----- ----- - ---------------------- -- -- - -- - ---- ---------------------------- ---------------------------- -- -- - ---- ----------------- ------ -- -------- ----------------- ----- ------------ -------------
在上面的代码中，.yDomain() 方法用于设置 Y 轴的范围。如果想要修改 Y 轴的类型为对数比例尺，可以使用 .yScale() 方法。
总的来说，无论是 d3.js 还是 nvd3.js，都提供了丰富的 API 来帮助开发者更好地设置 Y 轴的范围，从而更好地
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14585