Как генерировать осевой знак оси для каждого года в D3?

Question

Как я могу генерировать тик за каждый год в D3?

Следующий код, похоже, работает, когда мои данные охватывают несколько лет, но в нем отображаются месяцы, когда в данных имеется всего несколько лет (скажем, 3 года)?

var xAxisScale = d3.scaleTime() 
    .domain([new Date(min, 0, 1, 0), new Date(max, 0, 1, 0)]) 
    .rangeRound([100,width]) 

xAxisScale.ticks(d3.timeYear.every(1)); 

Answer 1

Вы можете установить формат клеща явно с помощью tickFormat в вашем генераторе оси ::

xAxis.tickFormat(d3.timeFormat("%Y")); 

Проверьте фрагмент кода, первая ось проходит с 2000 по 2016 год, второй с 2014 по 2016 год. Третий же, но с ticks(d3.timeYear) держать только один тик в год:

var width = 400, height = 200; 
 

 
var svg = d3.select("body") 
 
    .append("svg") 
 
    .attr("width", width) 
 
    .attr("height", height); 
 

 
var xAxisScale1 = d3.scaleTime() 
 
    .domain([new Date(2000, 0, 1), new Date(2016, 0, 1)]) 
 
    .rangeRound([20,width - 20]); 
 

 
var xAxisScale2 = d3.scaleTime() 
 
    .domain([new Date(2014, 0, 1), new Date(2016, 0, 1, 0)]) 
 
    .rangeRound([20,width - 20]); 
 

 
var xAxis1 = d3.axisBottom(xAxisScale1); 
 

 
var xAxis2 = d3.axisBottom(xAxisScale2).tickFormat(d3.timeFormat("%Y")); 
 

 
svg.append("g").call(xAxis1); 
 

 
svg.append("g").attr("transform", "translate(0,40)").call(xAxis2); 
 

 
svg.append("g").attr("transform", "translate(0,80)").call(xAxis2.ticks(d3.timeYear));

<script src="https://d3js.org/d3.v4.min.js"></script>