Question

我正在使用dc.js构建条形图，并希望x轴列出一年中的12个月。

到目前为止，我让它将第一个刻度显示为一天中的时间（下午06点），并将所有后续刻度显示为小数（千分之一）。

我看到了一个类似的问题（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)

dc.js x轴不会以月为单位显示刻度，而是显示小数

1 个答案: