c3.js의 일부 y 값에만 x 그리드 선을 표시하는 방법은 무엇입니까? <strong>"오늘"</strong>라는 <strong>X 그리드 라인</strong> 만드는 방법

Question

는 일부 Y 값

grid: { 

    x: { 
     lines: [ 
      {value: 4, text: 'Today',position: 'start'}, 
      {value: 12} 

     ] 
    }, 

바이올린 (Y에서 예 = 0 내지 y = 25)로 도시된다 : https://jsfiddle.net/KrisKuliv/74fkuyw4/1/

Answer 1

C3.js는이 동작을 지원하지 않습니다. svg가이 방식으로 작동하지 않기 때문에 라인의 길이를 포함하지 않는 자신의 CSS 클래스로만이 라인을 사용자 정의 할 수 있습니다.

원하는 동작을 얻는 유일한 방법은 d3을 직접 사용하는 것입니다. 라인을 좀더 쉽게 선택할 수 있도록 몇 가지 클래스를 제공 할 수 있습니다.

grid: { 

    x: { 
     lines: [ 
      {value: 4, text: 'Today',position: 'start', class: 'myClass'}, 
      {value: 12} 

     ] 
    } 

d3.selectAll(".myClass") 

나는 아직 이와 같은 작업을 수행하지 않았지만이 작업이 도움이되기를 바랍니다.