d3js - 列圖 - 數據點對齊

Question

這是我用d3.js製作的圖表。我希望我的酒吧以tick值爲中心 - 就像每個酒吧（3酒吧）的中間酒吧應該與月份名稱一致。有沒有辦法做到這一點優雅？如果您需要關於數據集或圖表功能的更多信息，請告訴我們。

一些有用的代碼

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

您可以通過調整實現這一點無論是g.container的transform或附加矩形的x屬性。我會調整轉換，即改變

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

包括一些額外的空間（半dimension.value S之間的差）。