d3序数比例返回不准确的rangeRoundBands（）

Question

我有这个绘制boxplot的javascript函数。我希望x轴是序数比例，标签为“x = 5”，“x = 6”，“x = 7”等等

rangeRoundBands（）返回的宽度应该大于应有的宽度。我多次重读这个功能，但我找不到错误。

function boxplot(name, data, boxMargin, svgName, yDomain, xAxisHeaderAr, width, height, framePadding, drawYAxis) { //name of chart, data set, margin of each box, class name of svg frame

    if (typeof xAxisHeaderAr === 'undefined') xAxisHeaderAr = [];
    if (typeof (width) === 'undefined') width = 400;
    if (typeof (height) === 'undefined') height = 400;
    if (typeof (framePadding) === 'undefined') framePadding = 40;
    if (typeof (drawYAxis) === 'undefined') drawYAxis = true;
    if (typeof (yDomain) === 'undefined') yDomain=100;

    var w = width;
    var h = height;
    var padding = framePadding; // padding for svg frame


    // nLabels simply is an array that stores values of n
    // nLabels = [1,2,3, etc] and I want the xAxis to have labels:
    // n=1, n=2, n=3, etc
    var nLabels = new Array();
    for (var i = 0; i < data.length; i++) {
        nLabels[i] = data[i].computedData.n;
    }

    var svg = d3.select(svgName) //svg frame has class name similar to the name of the chart
                .attr({
                    "width": w,
                    "height": h
                });
    var box = svg.selectAll("g")
               .data(data)
               .enter()
               .append("g");
    // set up the x and y scales
    var xScale = d3.scale.ordinal()
                    .domain(nLabels)
                    .rangeRoundBands([padding, w - padding]);

    var yScale = d3.scale.linear()
                    .domain([0, yDomain])                 
                    .range([h - padding, padding]);

    box.append("rect")
        .attr({
            "x": function (d, i) {
                return i * xScale.rangeBand() + padding + boxMargin/2;
            },
            "y": function (d) { 
                return yScale(d.computedData.values[1]);
            },
            "width": xScale.rangeBand() - boxMargin, //make the box smaller compared to the real band
            "height": function (d) { 
                return yScale(d.computedData.values[2]) - yScale(d.computedData.values[1]); //lowerQrt - upperQrt
            },
            "fill": function (d) { return "rgb("+d.computedData.values[1]*5 + ",102,0)"; }
        });


    // set up the x and y axis
    var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("top")
                    .ticks(nLabels.length)
                    .tickFormat(function (d) { return "n = " + d }); //FYI, this function always return 1 value although it should return n=1, n=2, n=3, etc

    var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(5); // the y axis has an increment of 20

    // draw x and y axis
    svg.append("g")
        .attr({
            "class": "axis",
            "transform": "translate(0, " + (h - padding) + ")"
        })
        .call(xAxis);

    if (drawYAxis) {
        svg.append("g")
            .attr({
                "class": "axis",
                "transform": "translate(" + padding + ",0)"
            })
            .call(yAxis);
    }

这是该功能绘制的图像。正确的图像应该有2个条，n = 93，n = 93

但是，下面的图片有1巴。另一个条被推到x轴以外（接近1.45的数字）