Javascript 为什么有些条形图在d3条形图中偏离中心？

我正在使用d3和svg元素构建一个条形图。我正在使用范围带放置栏，但由于某些原因，某些栏没有在正确的位置结束（请参见下面的链接，我无法附加图像，它应该与其他图像类似）。 我正在使用下面的代码来放置这些条 让

私有组：d3.选择；
xScale=d3.scale.ordinal（）
.domain（viewModel.dataPoints.map（d=>d.category））
.环游乐队
（[BarChart.Config.Axis.padding，width]，BarChart.Config.xScalePadding，0.2）；
设xAxis=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）；
这个.xaxis组
.attr（'transform'，'translate（0'，+（height-BarChart.Config.Axis.padding）+'））
.呼叫（xAxis）；
d3.选择（“g.xAxis”）.选择全部（“文本”）
.attr（'fill'，d=>类别颜色（d））
.attr（'font-weight'，'bold'）；

以及钢筋的实际位置：

 let bars = this.backgroundBarGroup
        .selectAll(".bar")
        .data(staticViewModel.dataPoints);
bars.
    enter()
    .append("rect")
    .classed("bar", true); 

bars.attr({
    width: xScale.rangeBand(),
    height: (dataPoint: BarChartDataPoint) => height - BarChart.Config.Axis.padding - yScale(<number>dataPoint.minValue),
    y: (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value),
    x: (dataPoint: BarChartDataPoint) => xScale(dataPoint.category)+18,
         })
.style({
    'fill-opacity': 0.5,
    'stroke-opacity': 0.5,
    fill: (dataPoint: BarChartDataPoint) => dataPoint.color,
    stroke: (dataPoint: BarChartDataPoint) => dataPoint.strokeColor,
    "stroke-width": (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`,
       });

let bar=this.backgroundBarGroup
.selectAll（“.bar”）
.数据（staticViewModel.dataPoints）；
酒吧。
输入（）
.append（“rect”）
.分类（“酒吧”，真实）；
酒吧({
宽度：xScale.rangeBand（），
高度：（dataPoint:BarChartDataPoint）=>height-BarChart.Config.Axis.padding-yScale（dataPoint.minValue），
y：（数据点：BarChartDataPoint）=>yScale（dataPoint.value），
x:（数据点：BarChartDataPoint）=>xScale（dataPoint.category）+18，
})
.风格({
“填充不透明度”：0.5，
“笔划不透明度”：0.5，
填充：（dataPoint:BarChartDataPoint）=>dataPoint.color，
笔划：（数据点：BarChartDataPoint）=>dataPoint.strokeColor，
“笔划宽度”：（数据点：BarChartDataPoint）=>`${dataPoint.strokeWidth}px`，
});

任何帮助都将不胜感激！

---

谢谢！

因为您需要删除

.attr

let bars = this.backgroundBarGroup
        .selectAll(".bar")
        .data(staticViewModel.dataPoints);
bars.
    enter()
    .append("rect")
    .classed("bar", true)
    .attr({
        width: xScale.rangeBand(),
        height: (dataPoint: BarChartDataPoint) => height - BarChart.Config.Axis.padding - yScale(<number>dataPoint.minValue),
        y: (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value),
        x: (dataPoint: BarChartDataPoint) => xScale(dataPoint.category)+18,
     })
    .style({
        'fill-opacity': 0.5,
        'stroke-opacity': 0.5,
        fill: (dataPoint: BarChartDataPoint) => dataPoint.color,
        stroke: (dataPoint: BarChartDataPoint) => dataPoint.strokeColor,
        "stroke-width": (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`,
     });

let bar=this.backgroundBarGroup
.selectAll（“.bar”）
.数据（staticViewModel.dataPoints）；
酒吧。
输入（）
.append（“rect”）
.classed（“bar”，真）
艾特先生({
宽度：xScale.rangeBand（），
高度：（dataPoint:BarChartDataPoint）=>height-BarChart.Config.Axis.padding-yScale（dataPoint.minValue），
y：（数据点：BarChartDataPoint）=>yScale（dataPoint.value），
x:（数据点：BarChartDataPoint）=>xScale（dataPoint.category）+18，
})
.风格({
“填充不透明度”：0.5，
“笔划不透明度”：0.5，
填充：（dataPoint:BarChartDataPoint）=>dataPoint.color，
笔划：（数据点：BarChartDataPoint）=>dataPoint.strokeColor，
“笔划宽度”：（数据点：BarChartDataPoint）=>`${dataPoint.strokeWidth}px`，
});

哦，这是一个相当愚蠢的错误。非常感谢。

let bars = this.backgroundBarGroup
        .selectAll(".bar")
        .data(staticViewModel.dataPoints);
bars.
    enter()
    .append("rect")
    .classed("bar", true)
    .attr({
        width: xScale.rangeBand(),
        height: (dataPoint: BarChartDataPoint) => height - BarChart.Config.Axis.padding - yScale(<number>dataPoint.minValue),
        y: (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value),
        x: (dataPoint: BarChartDataPoint) => xScale(dataPoint.category)+18,
     })
    .style({
        'fill-opacity': 0.5,
        'stroke-opacity': 0.5,
        fill: (dataPoint: BarChartDataPoint) => dataPoint.color,
        stroke: (dataPoint: BarChartDataPoint) => dataPoint.strokeColor,
        "stroke-width": (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`,
     });