데이터 레이블의 c3js 위치

Question

막대 차트에서 c3의 데이터 위에 레이블 위치를 변경하는 방법이 있습니까? 공식 문서에는 y 및 x 정수를 조작하여 x 및 y 측정 축의 레이블 위치를 변경하는 방법에 대해 잘 설명되어 있지만 데이터 레이블에는 아무 것도 발견되지 않았습니다.

나는 c3의 기반이되는 일반 d3으로 가리 키도록 시도했지만 나에게 널을 console.log 반환했습니다

d3.selectAll(".c3-texts .c3-text").each(function() { 
    var yOrigin = d3.select(this).attr('y'); 
    console.log(yOrigin); 
}) 

는 그래프를 생성하기 전에 화재 있기 때문이다. 당신이 그 라벨에 영향을 미칠 수 http://jsfiddle.net/e60o24d0/

Answer 1

두 가지 방법이 있습니다 : 당신은보고 내가 여기에 일하고 있어요 무엇을 편집 할 수 있습니다

을 수행합니다. CSS에 transform을 사용하십시오 :

.c3-texts .c3-text text { 
    transform: translate(-22px, 0); 
} 

b.

var chart = c3.generate({ 
    onrendered:() => { 
     d3.selectAll('.c3-text').each((v) => { 
      console.dir(v); 
     }); 
    }, 
    data: { 
     columns: [ 
      ['data1', 30, -200, -100, 400, 150, 250], 
      ['data2', -50, 150, -150, 150, -50, -150], 
      ['data3', -100, 100, -40, 100, -150, -50] 
     ], 
     groups: [ 
      ['data1', 'data2'] 
     ], 
     type: 'bar', 
     labels: true 
    }, 
    grid: { 
     y: { 
      lines: [{value: 0}] 
     } 
    } 
}); 

이것은 당신이 다음 임의의 추측을하지 않는에서는 setTimeout을 사용하는 것보다 더 나은 아니라 당신이되기 전에 레이블을 렌더링하는 데 얼마나 걸릴지에 : 그들이 onrendered 콜백 D3를 사용하여 선택 D3로 그들을 선택할 수 있습니다.