D3의 제어 축 틱 번호

Question

이 코드를 사용하여 100 개가 넘는 그래프를 만들려고합니다. 각 그래프는 고유 한 그래프가되고 다른 점을 그립니다. 그러나, 나는 그들의 일반적인 레이아웃을 똑같이 보일 필요가있다.

.ticks() 함수를 사용할 때 D3은 내가 입력 한 값을 완전히 무시합니다. 모든 그래프는 항상 다른 수의 틱으로 나오지만 문제를 해결할 방법을 찾지 못합니다. D3가 내 가치를 받아들이도록 강요하는 방법이 있습니까? 나는() 함수 .tickValues를 사용하여 종료

var xAxis = d3.svg.axis() 
    .orient("bottom") 
    .scale(x) 
    .ticks(10) 
    .tickFormat(d3.format("d")) 
    .tickSize(1); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10) 
    .tickSize(1); 

var yAxixObject = graph.append("g") 
    .call(yAxis) 
    .attr("transform", "translate("+ margin.left + "," + margin.top + ")"); 

var xAxisObject = graph.append("g") 
    .call(xAxis) 
    .attr("transform", "translate("+ margin.left + "," + (height + margin.top) + ")"); 

Answer 1

FernOfTheAndes '제안에서 :

이 관련 코드입니다. 방금 루프를 추가하여 .tickValues ​​()에 입력 할 배열을 만들었습니다. 이제 모든 데이터가 얼마나 다른지에 관계없이 내 그래프에는 여전히 10 개의 틱이 있습니다.

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickSize(1); 

... 

var ticksNum = 10; 
var yAxisTicks = []; 
var yDomain = [d3.min(data, function(d){return d.Level;}), d3.max(data, function(d){return d.Level;})]; 
y.domain(yDomain); 

... 

for (var i = 0; i < ticks; i++){ 
      yAxisTicks.push((yDomain[1] - yDomain[0])/(ticks - 1)* i + yDomain[0]); 
    } 

yAxis.tickValues(yAxisTicks); 

... 

var yAxixObject = graph.append("g") 
    .call(yAxis) 
    .attr("transform", "translate("+ margin.left + "," + margin.top + ")");