d3.svg.axis를 정수 레이블로 제한하는 방법은 무엇입니까?

Question

그래프에 표시되는 d3.svg.axis 정수 레이블의 수를 제한 할 수 있습니까? 예를 들어이 그래프를 봅니다. 여기에는 5 개의 크기 ([0, 1, 2, 3, 4]) 만 있습니다. 그러나 틱은 .5, 1.5, 2.5 및 3.5에 대해서도 표시됩니다.

Answer 1

형식 기능.

d3.svg.axis() 
    .tickFormat(d3.format("d")); 

또한 축이 자동으로 기본적으로 사용됩니다 규모 tickFormat를 사용할 수 있습니다.

Answer 2

나는 오히려 완전히 제외하는 것보다,이 값을 숨길 정도로 것을 깨달았다. 이것은 사용하여 수행 할 수있는 tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format)과 같은 : 당신은 d3.format를 사용하는 대신에 자신을 작성 할 수 있어야한다

d3.svg.axis() 
    .tickFormat(function(e){ 
     if(Math.floor(e) != e) 
     { 
      return; 
     } 

     return e; 
    }); 

Answer 3

tickFormat으로 d3.format("d")을 사용하면 모든 시나리오에서 작동하지 않을 수도 있습니다 (see this bug). Windows Phone 장치 (및 기타 다른 장치)에서 부정확 한 계산은 틱이 정수로 올바르게 감지되지 않는 상황을 초래할 수 있습니다. 이자형. 진드기 "3"은 내부적으로 d3.format("d")의 정수가 아닌 2.9999999999997로 저장 될 수 있습니다.

결과적으로 축이 전혀 표시되지 않습니다. 이 동작은 특히 진드기 범위가 10까지 분명 해집니다.

가능한 해결책 중 하나는 엡실론 값을 지정하여 기계 오류를 허용하는 것입니다. 값은이 방법으로 정확한 정수가 될 필요는 없지만, (데이터 오류보다 훨씬 낮아야한다) 엡실론 범위까지 다음 정수 다를 수 있습니다

var epsilon = Math.pow(10,-7); 

var axis = d3.svg.axis().tickFormat(function(d) { 
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon)) 
     return; 
    return d; 
} 

또 다른 해결책도 언급 다른 스레드에서는 고정 틱 수를 지정한 다음 틱 (이제는 "거의"정수 여야 함)을 가장 가까운 정수로 반올림합니다. 이 작업을 수행하려면 데이터의 최대 값을 알아야합니다.

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))