D3：刻度通过轴时会做什么？

Question

在d3中，如果要创建轴，可以执行以下操作：

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

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

Answer 1

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

d3比例函数将数据集中的每个数据点转换为您范围内的相应值。 这样就可以在屏幕上显示它。 前面的示例是一个简单的转换，因此d3.scale（）函数对您没有多大帮助，但是花一些时间将数据点转换为可视表示形式，您会很快发现scale函数正在做大量工作的情况为了你。

在轴的特定情况下，比例函数的作用完全相同。 它正在为每个“刻度”进行转换（至像素），并将其放置在屏幕上。