D3：当通过一个轴时，秤会做什么？答案

【问题标题】：D3: What does the scale do when passed an axis?D3：当通过一个轴时，秤会做什么？
【发布时间】：2014-07-28 06:30:03
【问题描述】：

在 d3 中，如果你想创建一个轴，你可以这样做：

var xAxis = d3.svg.axis()
.scale(x)

其中 x 是比例函数。我知道 x 的域定义了刻度的开始和结束值。我无法理解 x 的范围如何改变结果轴。域在轴的上下文中映射到什么。

【问题讨论】：

范围确定轴的长度和刻度及其值的域。
@LarsKotthoff 轴的长度是什么意思？我尝试调整范围的第一个值，看起来它移动了起始位置，范围的第二个值移动了结束位置，但我不确定这些值应该代表什么。
这些值是像素。范围的开始和结束之间的差异是以像素为单位的长度。

标签： javascript d3.js scale axes

【解决方案1】：

想想必须做些什么来创建任何数据集的可视化表示。您必须将每个数据点（例如 100 万美元）转换为屏幕上的一个点。如果您的数据的最小值为 0 美元，最大值为 1000000 美元，则您的域为 0 到 1000000。现在要在计算机屏幕上表示您的数据，您必须将每个数据点（例如 25 美元）转换为多个像素。您可以尝试简单的 1 对 1 线性转换（25 美元转换为屏幕上的 25 个像素），在这种情况下，您的范围将与您的域 = 0 到 1000000 相同。但这需要一个血腥的大屏幕。我们更有可能知道我们希望图形在屏幕上显示多大，因此我们相应地设置了我们的范围（例如 0 到 600）。

d3 scale 函数将数据集中的每个数据点转换为范围内的相应值。这使它能够在屏幕上呈现。前面的例子是一个简单的转换，所以 d3.scale() 函数对你的作用不大，但是花一些时间将数据点转换为可视化表示，你会很快发现一些情况下 scale 函数做了很多工作给你。

在轴的特定情况下，比例函数正在做同样的事情。它正在为每个“刻度”进行转换（到像素）并将它们放置在屏幕上。

【讨论】：