Используйте слова как метки меток с неравными интервалами в D3.js

Question

Я создаю график D3.js из нескольких лет данных. Я хотел бы использовать имена месяцев в качестве меток оси. Я в настоящее время использую количество дней в году, соответствующий с первого дня этого месяца в качестве меток, как показано на скриншоте моей оси х:

Я считаю, что все соответствующий код показан ниже:

var margins = {'top' : 20, 'right' : 20, 'bottom' : 50, 'left' : 70}; 
var height = 500; 
var width = 960; 
var plotHeight = height - margins.top - margins.bottom; 
var plotWidth = width - margins.right - margins.left; 

var x = d3.scaleLinear() 
    .domain([0,366]) 
    .range([margins.left, plotWidth]); 

// I am not concerned with leap years 
var monthDays = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]; 
var monthAbr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

var svg = d3.select('.svg').attr('width',width).attr('height',height); 

svg.append('g').attr('transform', 'translate(0,' + plotHeight + ')').call(d3.axisBottom(x).tickValues(monthDays)); 

есть ли какой-нибудь способ, чтобы отобразить положение на оси х до правильного месяца (то есть: 31 до февраля)? Я пробовал использовать d3.timeMonth/d3.timeMonths и порядковые масштабы, но пока не нашел что-то подходящее.

Answer 1

Вы можете использовать tickFormat:

.tickFormat(function(d,i){ return monthAbr[i]}) 

Вот рабочий пример на основе кода:

var margins = {'top' : 20, 'right' : 20, 'bottom' : 50, 'left' : 20}; 
 
var height = 100; 
 
var width = 600; 
 
var plotHeight = height - margins.top - margins.bottom; 
 
var plotWidth = width - margins.right - margins.left; 
 

 
var x = d3.scaleLinear() 
 
    .domain([0,366]) 
 
    .range([margins.left, plotWidth]); 
 

 
// I am not concerned with leap years 
 
var monthDays = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334]; 
 
var monthAbr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
 

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

 
svg.append('g').attr('transform', 'translate(0,' + plotHeight + ')').call(d3.axisBottom(x).tickValues(monthDays).tickFormat(function(d,i){ return monthAbr[i]}));

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