Question

This is a chart that I have made using d3.js. I want my bars to be centered around the tick values – as in the middle bar of each set (of 3 bars) should coincide with the month name. Is there some way to do this elegantly? Do let me know if you need more info on the data set or the chart functions.

Some helpful code

this.container.selectAll('g.container')
    .data(this.data)
  .enter().append('g')
    .attr('class', 'container')
    .attr('transform', function(d, i){
        console.log(d.dimension, this)
        var x = self.margin.left + self.xScale(d.dimension.value);
        var y = self.margin.top;
        return 'translate('+ x + ',' + y +')'
});

this.bars = this.container.selectAll('g.container')
    .selectAll('rect.bar')
    .data(function(d){ return d; })
  .enter()
    .append('rect')
    .attr('class', 'bar')
    .attr('width', 3)
    .attr('height', function(d){
        console.log(d.y, d.key, this);
        return availableHeight - self.yScale(d.y);
    })
    .attr('y', function(d){ return self.yScale(d.y); })
    .attr('x', function(d, i){ return i * 5 });

Answer 1

You can achieve this by adjusting either the transform of the g.container or the x attribute of the appended rectangles. I would adjust the transforms, i.e. change

.attr('transform', function(d, i){
  console.log(d.dimension, this)
  return 'translate('+ 
          (self.margin.left + self.xScale(d.dimension.value)) + ',' 
          + self.margin.top +')'
});

to include some extra space (half the difference between the dimension.values).