Javascript D3.js顺序刻度轴错误对齐

我有一个简单的

d3

条形图（请参阅）。它说明了分数的计数。基本上是正态分布图。x轴是从0到2的分数顺序标度

我的x轴与相应的条不对齐

如果在创建画笔范围并单击条时查看JS控制台，则所选条与轴标签不匹配

标签似乎与条形图呈负向偏移

我做错了什么

function drawChart (data) {
    // Setup Crossfilter dimensions and groups
    var nation      = crossfilter(data),
        byScr       = nation.dimension(function(d){ return d.score; }),
        byScrGrp    = byScr.group().reduceCount(),
        byHosp      = nation.dimension(function(d){ return d.FIPS; }); 

    // Histogram X-Axis ordinal scale
    var x = d3.scale.ordinal()
            .domain(d3.range(0,2,0.1))
            .rangeBands([0, width, 0.5, 0.5 ]);

    var brushScale = d3.scale.linear()
            .domain([0,2])
            .range([0, width]);

    // Histogram Y-Axis linear scale
    var y = d3.scale.linear()
            .domain([0, d3.max(byScrGrp.all(), function(d){ return d.value; })])
            .range([height/2, 0]);

    // SVG Brush control object
    var brush = d3.svg.brush()
            .x(brushScale)
            .on("brushstart", brushstart)
            .on("brush", brushmove)
            .on("brushend", brushend)

    // Histogram SVG containiner    
    var svg = d3.select("#histogram").append("svg:svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height/2 + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // Histogram bars
        svg.selectAll("rect")
            .data(byScrGrp.all())
            .enter().append("rect")
            .attr("x", function(d,i){ return i * (width / byScrGrp.size() ); })
            .attr("width", width / byScrGrp.size() - barPadding )
            .attr("y", function(d){ return  y(d.value) ; })
            .attr("height", function(d){ return ((height/2) -y(d.value)); })
            .attr("fill", function(d){ return color(d.key); })            .on("mouseover", function(d){ d3.select(this).attr("fill", "teal"); console.log(d.key); })
            .on("mouseout", function(d) { d3.select(this).attr("fill", function(d){return color(d.key);}) } );


    // Histogram X Axis Object
    var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10);
        // X Axis
        svg.append("g")
            .attr("class", "axis")
            .call(xAxis)
            .attr("transform", "translate(0, " + height/2 + ")") ;
        // X Axis Label
        svg.append("text")
            .attr("transform", "translate(" + (width/2) + " ," + (height/2 + margin.bottom) + ")")
            .attr("text-anchor", "middle")
            .text("MSPB Score");

    // Histogram Y Axis Object
    var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
        // Add Y Axis
        svg.append("g")
            .attr("class", "axis")
            .call(yAxis)
            .attr("transform", "translate(" + margin.left + ",0)");
        // Add Y Axis Label
        svg.append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 0 - 10)
            .attr("x", 0 - (height/4))
            .attr("text-anchor", "middle")
            .text("Number of Hospitals");


var brushg = svg.append("g")
            .attr("class", "brush")
            .call(brush)

    brushg.select('.background')
                .attr('width', width);

    brushg.selectAll("rect")
                .attr("height", height/2);


function brushstart() {
  svg.classed("selecting", true);
}

function brushmove() {
  var s = brush.extent();
  brushg.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; });
}

function brushend() {
         if (!d3.event.sourceEvent) return;
        d3.select(this).transition()
            .call(brush.extent(brush.extent().map(function(d){return d3.round(d,2); })));

        var extent = brush.extent(); console.log(extent);
}


   }

功能图（数据）{
//设置交叉筛选维度和组
var国家=交叉过滤器（数据），
byScr=国家维度（函数（d）{返回d.score；}），
byScrGrp=byScr.group（）.reduceCount（），
byHosp=nation.dimension（函数（d）{返回d.FIPS；}）；
//直方图X轴顺序标度
var x=d3.scale.ordinal（）
.域（d3.范围（0,2,0.1））
.范围带（[0，宽度，0.5，0.5]）；
var brushScale=d3.scale.linear（）
.domain（[0,2]）
.范围（[0，宽度]）；
//直方图Y轴线性比例
变量y=d3.scale.linear（）
.domain（[0，d3.max（byscrgp.all（），函数（d）{返回d.value；}）]）
.范围（[高度/2,0]）；
//SVG笔刷控制对象
var brush=d3.svg.brush（）
.x（画笔比例）
.on（“刷起”，刷起）
.打开（“刷子”，刷子移动）
.on（“刷端”，刷端）
//直方图SVG容器
var svg=d3。选择（#直方图”）。追加（“svg:svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度/2+页边距。顶部+页边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//直方图条
svg.selectAll（“rect”）
.data（byScrGrp.all（））
.enter（）.append（“rect”）
.attr（“x”，函数（d，i）{returni*（width/byscrgp.size（））；}）
.attr（“宽度”，宽度/byScrGrp.size（）-barPadding）
.attr（“y”，函数（d）{返回y（d.value）；}）
.attr（“height”，函数（d）{return（（height/2）-y（d.value））；}）
.attr（“fill”，函数（d）{return color（d.key）；}）.on（“mouseover”，函数（d）{d3.select（this）.attr（“fill”，“teal”）；console.log（d.key）；}）
.on（“mouseout”，函数（d）{d3.select（this）.attr（“fill”，函数（d）{return color（d.key）；}）；
//直方图X轴对象
var xAxis=d3.svg.axis（）.scale（x）、oriented（“bottom”）、ticks（10）；
//X轴
svg.append（“g”）
.attr（“类”、“轴”）
.呼叫（xAxis）
.attr（“变换”、“平移（0）+高度/2+”）；
//X轴标签
svg.append（“文本”）
.attr（“变换”、“平移”（+（宽度/2）+）、“+（高度/2+边距.bottom）+”）
.attr（“文本锚定”、“中间”）
.text（“MSPB分数”）；
//直方图Y轴对象
var yAxis=d3.svg.axis（）.scale（y）、orient（“left”）、ticks（10）；
//添加Y轴
svg.append（“g”）
.attr（“类”、“轴”）
.呼叫（yAxis）
.attr（“变换”、“平移”（+margin.left+”，0）”）；
//添加Y轴标签
svg.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-10）
.attr（“x”，0-（高度/4））
.attr（“文本锚定”、“中间”）
.text（“医院数量”）；
var brushg=svg.append（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
笔刷。选择（“.background”）
.attr（“宽度”，宽度）；
brush.selectAll（“rect”）
.attr（“高度”，高度/2）；
函数brushstart（）{
svg.classed（“选择”，true）；
}
函数brushmove（）{
var s=brush.extent（）；
brushg.classed（“selected”，function（d）{returns s[0]我从来没有弄清楚这里到底发生了什么，但最糟糕的是手动将轴向左移动35像素

.attr("transform", "translate(-35" + height + ")");

从视觉上看，这是可以接受的，但并不是真正的问题解释。
你可能想为这个问题制作一个JSFIDLE。这是第一句链接中的一个。但是我编辑了使它更明显一点。谢谢！编辑了一点。事情是这样的，看起来你可能在gen中链接到了一个条形图艾拉。看看你是否喜欢。祝你好运。我也有同样的问题，所有这些解决方案对我都不起作用。只要移动轴就行了。