d3.js 不均匀缩放与 rangeBands答案

【问题标题】：d3.js uneven scaling with rangeBandsd3.js 不均匀缩放与 rangeBands
【发布时间】：2014-07-23 18:32:11
【问题描述】：

我正在尝试绘制带宽不均匀的序数轴。我知道有一种方法可以使用范围，指定 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 实现自定义范围？我尝试使用范围，但它没有按照我需要的方式绘制轴。

谢谢。

【问题讨论】：

你不能有宽度不均匀的带。

标签： javascript d3.js

【解决方案1】：

让我详细说明一下 Lars 的回答……呃……我的意思是评论。

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

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

【讨论】：