c3js 막 대형 차트, 데이터를 x 진수 시작 위치에 맞추기 (중심에 있지 않음)

Question

c3js에서 일반적인 막 대형 차트를 가져 오는 경우 막대는 x-tick 위치의 중앙에 배치됩니다. 시간별로 이동하는 차트가 있으므로 00-24 사이의 시간대 (보통 8-16)가 있습니다. 선형 차트 또는 산점도가있는 경우 x-tick에 정확하게 정렬되지만 계단식 차트 또는 막대 차트는 아닙니다. 내가 컬링/진드기 값/시간 시리즈 등의 모든 종류 노력했습니다 https://jsfiddle.net/jvcarphe/1/

하지만 난 그것을 수행하는 방법 신 그림 밖으로의 사랑을 할 수 없습니다 :

var chart = c3.generate({ 
    data: { 
      x: 'x', 
     columns: [ 
       ['x', 8, 9, 10, 11, 12, 13, 14, 15, 16], 
      ['data1', 1, 1, 0, 1, 0, 0, 1, 1, 1], 
     ], 
     type: "bar" 
    }, 
    axis: { 
     x: { 
     type: "category", 
     categories: [], 
     } 
    } 
}); 

이 바이올린을 참조하십시오 . 바이올린의 유형이 "line"으로 변경되면 바코드가 아니라 원하는대로 정확하게 수행됩니다.

Answer 1

나는 이것을하기 전에해야만했고, 간단한 설정으로 보이지는 않지만, 약간의 d3 조작이 효과가있다. 결론적으로 바보다 진드기를 옮기는 것이 더 쉽습니다.

바의 너비를 알고 있으면 틱을 상쇄하도록 CSS 규칙을 설정할 수 있습니다. 필요한 경우 -10px 만 변경하면됩니다. 당신이 중 하나를 조회하여 그것을 알아 내야 다음 너비를 알 수없는 경우>

.c3-axis-x .tick line, .c3-axis-x .tick text { 
    transform: translate(-10px,0); 
} 

는

(C3는 변환 스타일을 우선으로 단지 .tick에 규칙을 적용 할 수 없습니다) 동일한 스타일 규칙을 c3의 onrendered 콜백에서 동적으로 적용 :

onrendered: function() { 
     var thisChart = d3.select(this.config.bindto); 
     var barWidth = thisChart.select(".c3-bar-0").node().getBoundingClientRect().width/2; 
     thisChart.selectAll(".c3-axis-x .tick line,.c3-axis-x .tick text").style("transform", "translate(-"+barWidth+"px,0)"); 
} 

https://jsfiddle.net/jvcarphe/7/