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

Question

我正在使用 d3 和 svg 元素构建条形图。我正在使用 RangeBands 放置条形图，但由于某种原因，某些条形图没有出现在正确的位置 off center bar char（请参阅下面的链接，我无法附上图片，它应该看起来像另一张图片 centered bar chart。 我正在使用以下代码放置条形的代码 让

    private xAxisGroup: d3.Selection<SVGElement>;
    xScale = d3.scale.ordinal()
        .domain(viewModel.dataPoints.map(d => d.category))
        .rangeRoundBands
    ([BarChart.Config.Axis.padding, width], BarChart.Config.xScalePadding, 0.2);



let xAxis = d3.svg.axis()
            .scale(xScale)
            .orient('bottom');

    this.xAxisGroup
        .attr('transform', 'translate(0, ' + (height - BarChart.Config.Axis.padding)  + ')')
        .call(xAxis);

    d3.select("g.xAxis").selectAll("text")
        .attr('fill', d => categoryColor(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`,
       });

任何帮助将不胜感激！ 谢谢！

Answer 1

因为需要去掉.attr前面的bars

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`,
     });