javascript - D3 : What does the scale do when passed an axis?

Question

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

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

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

Answer 1

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

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

在轴的特殊情况下，缩放函数做的事情完全相同。它正在为每个“刻度”进行(到像素的)转换并将它们放置在屏幕上。