d3js - 칼럼 그래프 - 데이터 포인트 정렬

Question

이것은 d3.js를 사용하여 만든 차트입니다. 내 바가 틱 값을 중심으로 배치되기를 원합니다. 각 막대의 중간 막대 (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 속성. I는 즉, 변환을 조정

.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들 사이의 중간의 차이)를 포함하도록 변경한다.