javascript - d3.js 使用 rangeBands 进行不均匀缩放

Question

我正在尝试绘制一个带宽不均匀的序数轴。我知道有一种方法可以按照指定的范围来做到这一点 here ，但它似乎不适用于 rangeBands 或 rangeRoundBands。

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"];
var custom_range = [0, 19, 78, 97, 116, 135, 154, 173, 192, 211, 230, 249, 268];

var y_scale = d3.scale.ordinal().domain(letters).rangeRoundBands(custom_range);

console.log(y_scale.range());

最终的比例是:

[3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

如何使用 rangeBands 或 rangeRoundBands 实现自定义范围？我尝试使用范围，但它没有按照我需要的方式绘制轴。

谢谢。

Answer 1

让我详细阐述一下 Lars 的回答...呃..我的意思是评论。

您的范围将被分为 n 个带，每个带宽度(范围大小/带数量 = n)，其中 n 是给定数据集中的数据数量。因此，如果您有 100px 和 10 基准，您将拥有 100px/10 基准 = 10px 宽条。这就是为什么“你不能有宽度不均匀的带子” - Lars <3

您可以在此处阅读有关 rangeBands 和 rangeRoundBands 的更多信息: https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal_rangeBands