dc.js ось X не будет отображать метки как месяцы, вместо этого показывает десятичные дроби

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

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

Я видел похожий вопрос (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);

javascript dc.js crossfilter
person Jamlifeintodeath    schedule 15.04.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы используете номер месяца для ключа измерения, но даты для домена 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)
person Gordon    schedule 15.04.2015
comment
Я все еще не там. С var xAxis = barChart.xAxis().tickFormat(d3.time.format('%B'));, добавленным перед моими основными параметрами barChart, к которым я добавил .xUnits(d3.time.months);, он печатает 12 тиков, все помечены как декабрь. Я также пробовал var xAxis = barChart.xAxis().tickFormat(d3.time.format('%B')).ticks(d3.time.months, 12);, что не привело ни к каким ярлыкам. - person Jamlifeintodeath; 15.04.2015
comment
На диаграмме не отображаются столбцы, отметки оси X или отметки оси Y с данными из вашего примера. Теперь он просто отображает сами оси и метку оси Y. Я новичок в dc, d3 и javascript в целом, и уже несколько дней бьюсь об этом. Я ценю ваше терпение. - person Jamlifeintodeath; 15.04.2015