自定义dc.js日期x轴

Question

使用条形图：

actionsChart /* dc.barChart('#volume-month-chart', 'chartGroup') */
    .width(actionsWidth)
    .height(240)
    .margins({top: 10, right: 50, bottom: 30, left: 40})
    .dimension(dateDimension)
     //...
    .elasticX(true)
    .elasticY(true)
    .gap(1)
    .alwaysUseRounding(true)
    .x(d3.time.scale().domain( [ minDate,  maxDate ] ) )
    .round(d3.time.day.round)
    .xUnits(d3.time.days)
    .renderHorizontalGridLines(true)
    //.xAxisLabel( 'Dan')
    //.xAxisPadding(2)
    .xAxisLabel( "Datum")
    //.yAxisLabel( "Akcije" ) // OK, but already in title
    .xAxisPadding(1)
    //nok in dc: //.tickFormat(d3.time.format("%Y-%m-%d"))
    //.label( function(d){ return JSON.stringify(d); })
    ;

它在x轴上的标签不可读（彼此相邻的字符过多。

如何每隔5天或7天贴标签，并自定义格式（每月的数字，没有工作日）？
谢谢。

Answer 1

dc.js主要使用d3v3的d3.svg.axis绘制轴。

您可能正在寻找d3.svg.axis.ticks()和d3.svg.axis.tickFormat()。

您可以通过调用chart.xAxis()来获取dc.js使用的d3轴对象，但我建议您在其他图表初始化的单独语句中执行此操作，因为it gets confusing when you you chain function calls but they return different objects。

所以，像（未经测试）：

chart.xAxis()
    .ticks(d3.time.days, 7)
    .tickFormat(d3.time.format('%e'));

d3v3 time formatting specifiers

如果您无法使自动滴答发生器完成您想要的操作，您始终可以使用.tickValues()指定精确的刻度列表。你想在每次渲染和重绘之前这样做，所以（再次，未经测试）：

function calc_ticks(chart) {
    var ticks = d3.time.weeks(chart.xAxisMin(), chart.xAxisMax()); // or days(chart.xAxisMin(), chart.xAxisMax(), 5)
    chart.xAxis().tickValues(ticks);
}
chart.on('preRender', calc_ticks)
    .on('preRedraw', calc_ticks);