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

Question

I am building a bar chart using d3 and svg elements. I am using RangeBands for placing the bars but for some reason some of the bars aren't ending up in the correct place off center bar char (see the link below I cant attach the image, it should look like the other image centered bar chart . The code I'm using the following code to place the bars let

    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');

and the actual placement of the bars:

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

any help would be really appreciated! Thanks!

Answer 1

Because you need to remove the bars in front of .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`,
     });