d3 js 양방향 수평 막 대형 차트

Question

d3을 사용하여 수평 양방향 막 대형 차트를 플로팅하려고합니다. 나는 바이올린 샘플을 가지고있다. 나는 그것을 필요에 따라 업데이트했다. 그러나 나는 약간의 문제로 끝난다.

여기에 바이올린을 찾아주세요 : https://jsfiddle.net/binuabraham/9c3rsrk6/1/

내가 그 6에서 틱 필요 - 내 그래프가 30 모든 시간을. 그러나 값을 변경하면 x 축은 다음과 같이 바뀝니다.

var xAxis = d3.svg.axis() 
    .scale(x) 
    .tickValues(d3.range(6, 31, 2)); 

또한 값마다 틱 간의 차이가 변경됩니다. 아무도 그것으로 나를 도울 수 있습니까?

Answer 1

문제는 먼저 30

6에서

var x = d3.scale.linear() 
     .domain([6, 30]) 

로 X 도메인을 설정 나중에 데이터

x.domain(d3.extent(data, function (d) { 
       return d.value; 
      })).nice(); 

그래서 수정에 따라 다음과 같이 도메인을 설정입니다 위의 한 번 해보십시오.

그리고 당신은 당신의 데이터 이후 틱 값 (31)을 설정할 수 없습니다 .tickValues(d3.range(6, 31, 2)); 눈금 값을 제거 코드를 작업 (26)

까지 최대가 here

편집

항상 도메인을 원하는 경우 6 ~ 30이되도록 추가하십시오 :

var x = d3.scale.linear() 
      .domain([6, 30]) 

이하이 줄을 제거 : 어떻게 값을 변경하려면 어떻게해야합니까 코드를 here