d3.js uneven scaling with rangeBands

问题

I'm trying to draw an ordinal axis with uneven band widths. I know there's a way to do it with range, as specified here, but it doesn't seem to work with rangeBands or 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());

The resulting scale is:

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

How might I achieve a custom range with rangeBands or rangeRoundBands? I tried using range, but it doesn't draw the axis the way I need.

Thanks.

回答1:

Let me elaborate a bit more on the Lars' answer... erm.. I mean comment.

Your range will be divided into n bands each of width (size of range / number of bands = n) where n is the number of datum within the given data set. So if you have 100px and 10 datum you'll have that 100px/10 datum = 10px wide bars. That's why "You can't have bands with uneven width" - Lars <3

You can read more about rangeBands and rangeRoundBands here: https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal_rangeBands

来源：https://stackoverflow.com/questions/24918221/d3-js-uneven-scaling-with-rangebands