javascript - D3 顺序尺度和线性尺度之间的区别

标签 javascript 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 中使用序数线性尺度感到困惑。

以下是我从 API 文档中发现的内容,仍然有点迷失......如果有人可以提供帮助,我们将不胜感激。

序数(x)

给定输入域中的值x,返回输出域中的对应值。

如果范围是明确指定的(如范围,但不是 rangeBands、rangeRoundBands 或 rangePoints),并且给定值 x 不在比例尺的域中,则 x 被隐式添加到域中;给定相同值 x 的后续调用将返回范围中的相同值 y。

d3.scale.linear()

构造一个新的线性比例尺,默认域为 [0,1],默认范围为 [0,1]。因此,默认的线性比例相当于数字的恒等函数;例如 linear(0.5) 返回 0.5。

最佳答案

至于Ordinal Scales :

Ordinal scales have a discrete domain, such as a set of names or categories.

An ordinal scale's values must be coercible to a string, and the stringified version of the domain value uniquely identifies the corresponding range value.

因此,举个例子,一个序数尺度的域可能包含名称,如下所示:

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

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

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

现在,至于Quantitative Scales (例如线性标尺):

Quantitative scales have a continuous domain, such as the set of real numbers, or dates.

例如,您可以构建以下比例:

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

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

注意 D3 如何能够插入 5,即使我们没有在域中明确指定它也是如此。

看看this jsfiddle查看上面的代码。

关于javascript - D3 顺序尺度和线性尺度之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29785238/

相关文章:

javascript - 如何: operator works in Javascript

javascript - 上传到 firebase 时如何降低图像质量

javascript - 如何测量PhantomJS中的渲染时间?

javascript - 粘性页脚不能水平滚动的问题,以及窗口大小折叠时主要内容聚集在一起的问题

d3.js - DJ3S - 在正交投影中完成旋转时移除标线

javascript - 从选择中排除元素

javascript - 溢出-y : hidden but should enable mouse scrolling

javascript - 在 D3 中创建换行符

javascript - D3.js:无需缩放即可平移翻译,无需 d3.drag

javascript - 使用 D3.js 制作旭日图