dc.js ось x не будет показывать тики в виде месяцев, вместо них отображаются десятичные числа

Question

Я строю гистограмму с использованием dc.js и хочу, чтобы ось х отображала 12 месяцев года.

Пока у меня есть рендеринг, показывающий первый тик как время дня (06 PM), и все последующие тики как десятичные (тысячные).

Я видел подобный вопрос (https://stackoverflow.com/questions/21392997/dc-js-x-axis-hour-labels-appear-as-thousandths#=), но ответ включал преобразование миллисекунд в более крупные единицы, что невозможно с месяцами (что я знаю).

Вот мой код. Заранее спасибо за помощь.

var parseDate = d3.time.format("%m/%d/%Y").parse; 

data.forEach(function(d) { 
    d.date = parseDate(d.weekStart); 
    d.month = d.date.getMonth(); 
}); 

var monthDim = ndx.dimension(function(d) {return d.month;}); 
var milesByMonth = monthDim.group().reduceSum(dc.pluck('miles')); 
//set range for x-axis 
var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 

var barChart = dc.barChart("#myBarChart"); 
barChart 
    .width(800).height(200) 
    .margins({top: 10, right: 10, bottom: 20, left: 60}) 
    .dimension(monthDim) 
    .group(milesByMonth) 
    .gap(40) 
    .transitionDuration(1500) 
    .yAxisLabel('Miles Per Month') 
    .renderHorizontalGridLines(true) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    //.x(d3.scale.ordinal()) 
    //.xUnits(dc.units.ordinal) 
    //.x(d3.time.scale().domain([new Date(2012, 0, 1), new Date(2012, 11, 31)])) 
    //.round(d3.time.month.round) 
    .elasticX(true) 
    .elasticY(true); 

Answer 1

Используется номер месяца для ключа измерения, но даты для вашего домена x. Я предлагаю всегда использовать даты в качестве ключа измерения, но используя месяцы как ваш групповой ключ, чтобы он складывался по месяцам, но не терял остальную информацию.

var milesByMonth = dateDim.group(function(d) {return d.month;}).reduceSum(dc.pluck('miles')); 
barChart.dimension(dateDim) 

Вы должны быть в состоянии использовать ось .tickFormat() с d3.time.format получить месяцы печати.

Что-то вроде

var xAxis = chart.xAxis().tickFormat(d3.time. format('%B'); 

https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

https://github.com/mbostock/d3/wiki/Time-Formatting

Вам также может понадобиться указать

chart.xUnits(d3.time.months)