D3 : 만 표시 년 tickformat 방법 내 D3 차트

Question

내 날짜 월/일/년, 예를 들어 있습니다 : "2013년 10월 1일"

을 그리고 나는 그들에게이 방법을 분석하고 있습니다 : d3.time를 .format ("% x"). 구문 분석;

하지만 축 (. 년, 세기) 만 표시하려면 .tickFormat() 메서드를 내 축에 작성하려면 어떻게해야합니까?

Answer 1

구문 분석 스 니펫에서 %x에서 %Y으로 변경하십시오. 다른 것 등 데이터를 구할 수있는 곳의

물론

tickFormat: function(d) { 
     var dx = data[0].values[d]; 
     return dx ? d3.time.format('%Y')(new Date(dx)) : ''; 
} 

당신의 세부 사항 :

는이 같은 https://github.com/mbostock/d3/wiki/Time-Formatting

그래서 뭔가에 전체 문서를 찾을 수 있습니다.

Answer 2

x 축을 정의 할 때 tickformat으로 수정할 수 있고 함수를 전달하여 연도를 반환 할 수 있습니다.

다음은 전체 예제입니다.

var width = 200, height = 200; 
var data = ["10/1/2013", "10/1/2014"].map(d3.time.format("%x").parse) 
var xDomain = [Math.min.apply(null, data), Math.max.apply(null, data)]; 
var x = d3.time.scale().range([0, width]).domain(xDomain) 
var xAxis = d3.svg.axis() 
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); }) 
var svg = d3.select("body").append("svg") 
    .attr('width', 200) 
    .attr('height', 200); 
svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + 180 + ")") 
     .call(xAxis); 

우리는 x 축의 tickformat를 지정하는 장소가 될 것입니다 주목해야 할 주요 라인 :

var xAxis = d3.svg.axis() 
    .scale(x).tickFormat(function(time, index) { return time.getUTCFullYear()); }) 

주 우리가 xDomain의 구문 분석 시간을 사용 var x의 도메인을 지정합니다.