Javascript D3有序刻度和线性刻度之间的差异

我不知道什么时候在D3中使用序数或线性刻度

下面是我从API文档中发现的，仍然有点失落。。。如果有人能帮忙，我们将不胜感激

序数（x） 给定输入域中的值x，返回输出范围中的相应值

如果明确指定了范围（如按范围，但不是rangeBands、rangeRoundBands或rangePoints），且给定值x不在标尺的域中，则x隐式添加到域中；给定相同值x的标尺的后续调用将从范围返回相同值y

d3.比例。线性（）

---

使用默认域[0,1]和默认范围[0,1]构造新的线性比例。因此，默认的线性尺度相当于数字的单位函数；例如，线性（0.5）返回0.5。

在D3.js中，将数字从域转换为范围。对于线性标度，域将是一个连续变量，具有无限的值范围，然后可以将其转换为连续范围。对于有序标度，将有一个离散域，例如一年中的几个月，其中可能存在有限范围的可能值，这些值可能是有序的，但不是连续的。在以下方面，我可能比我更好地解释了这种差异

：

序数标度有一个离散域，例如一组名称或类别

有序刻度的值必须强制为字符串，并且域值的字符串化版本唯一标识相应的范围值

因此，作为一个例子，有序范围的域可能包含名称，如下所示：

var xScale = d3.scale.ordinal().domain([0, d3.max(data)]).rangeRoundBands([0, w], .1);
var yScale = d3.scale.linear().domain([0, data.length]).range([h, 0]);

请注意，所有值都是字符串。它们无法插值。“爱丽丝”和“鲍勃”之间是什么？我不知道。D3也没有

现在，对于（例如线性刻度）：

定量量表有一个连续的域，如实数集或日期

例如，可以构建以下比例：

var ordinalScale = d3.scale.ordinal()
        .domain(['Alice', 'Bob'])
        .range([0, 100]);

ordinalScale('Alice'); // 0
ordinalScale('Bob'); // 100

注意D3是如何插值5的，即使我们没有在域中明确指定它

---

看一看上面的代码，看看它们在起作用。

好的，我们可以开始学习，用相同的数据同时使用这两种方法来观察差异（我使用的是d3 v4），想象一下我们用

序数

和

线性

比例得到下面的数据：

var linearScale = d3.scale.linear()
        .domain([0, 10])
        .range([0, 100]);

linearScale(0); // 0
linearScale(5); // 50
linearScale(10); // 100

现在我们开始给他们打电话，看看结果：

const data = [1, 2, 3, 4, 5];

const scaleLinear = d3.scaleLinear()
  .domain([0, Math.max(...data)]).range([1, 100]);

const scaleOrdinal = d3.scaleOrdinal()
  .domain(data).range(['one', 'two', 'three', 'four', 'five']);

查看我们得到的函数和结果，正如您在序数函数中看到的，我们将数据映射到范围，而在线性函数中，我们将数据延伸到范围，因此在这些情况下，例如scaleLinear（1）将返回20。。。我们的域最大值是100，100除以5等于20，因此标度线（1）是20，标度线（2）是40

但是正如您所看到的，scaleOrdinal（1）映射到范围内的数组，因此它等于one和scaleOrdinal（2）它等于two

这就是如何使用这些刻度，scaleLinear对许多事情都很有用，包括在页面上显示刻度，但是scaleOrdinal对于按顺序获取数据更有用，文档中对此进行了解释：

#d3.scaleLinear（）

使用单位域[0,1]构造新的连续比例 单位范围[0,1]，默认插值器和夹紧已禁用。 线性刻度是连续定量的一个很好的默认选择 数据，因为它们保留了比例差异。每个范围值 y可以表示为域值x的函数：y=mx+b

d3.scaleOrdinal（[范围]）

使用空域和指定的 范围如果未指定范围，则默认为空数组；一 序数刻度始终返回未定义，直到指定非空范围 定义

此外，这是d3中一个很好的例子，可以同时使用序数和线性标度：

var myData=['1月'、'2月'、'3月'、'4月'、'5月'、'6月'、'7月'、'8月'、'9月'、'10月'、'11月'、'12月']
变量linearScale=d3.scaleLinear（）
.domain（[0，11]）
.范围（[0600]）；
var ordinalScale=d3.scaleOrdinal（）
.domain（myData）
.范围（[‘黑色’、‘ccc’、‘ccc’）；
d3.选择（“#包装器”）
.selectAll（'text'）
.数据（myData）
.输入（）
.append（'文本'）
.attr（'x'，函数（d，i）{
返回线刻度（i）；
})
.文本（功能（d）{
返回d；
})
.样式（“填充”，功能（d）{
返回顺序标度（d）；
});
正文{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
字体大小：14px；
颜色：#333；
}

线性刻度将在输入值之间插入，而顺序刻度则不会。@Larskothoff您能提供一些例子吗？文档中实际上有一个例子，
线性（0.5）
.Omg。。。你应该写D3API文档，非常棒，完全有意义。感谢堆：）如果您的域中有两个以上的项，即
['Alice'，Bob'，Carl']
，那么您可能需要使用
范围点
，而不是
范围
。请您解释这一点时不要使用诸如“离散域”、“定量尺度”、“插值”、“强制”和“域”之类的词语那么我们这些卑微的地球人能理解吗？或者至少定义它们。不是所有人都有数学背景。您好@dthree，很抱歉不清楚。这些是D3文档和API中经常使用的术语。我假设读者熟悉它们的意思。我也没有数学背景，但阅读关于D3的文章是一个很好的起点，在理解这些术语和D3本身方面帮助了我很多。非常有帮助，谢谢。然而，D3似乎确实想知道两者之间的区别
scaleLinear(1); //20
scaleOrdinal(1); //one

scaleLinear(2); //40
scaleOrdinal(2); //two

scaleLinear(5); //100
scaleOrdinal(5); //five