自定义dc.js日期x轴 [英] Customize dc.js date x-axis

问题描述

使用条形图:

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轴上的标签不可读(相邻字符过多).

It gets Label on x-axis unreadable (too much characters next to each other.

如何每5或7天贴标签，以及自定义格式(月号中的天，无周日)?
谢谢.

How to put label each 5 or 7 days, and customize format (day in month number, no week day) ?
Thank you.

推荐答案

dc.js通常使用d3v3的d3.svg.axis绘制其轴.

dc.js mostly uses d3v3's d3.svg.axis to draw its axes.

您可能正在寻找

You may be looking for d3.svg.axis.ticks() and d3.svg.axis.tickFormat().

您可以通过调用chart.xAxis()来获得dc.js使用的d3轴对象，但是我建议您在与其他图表初始化不同的语句中进行操作，因为

You can get at the d3 axis object that dc.js uses by calling chart.xAxis() but I advise doing it in a separate statement from your other chart initialization because it gets confusing when you you chain function calls but they return different objects.

所以，像(未经测试的)一样:

So, something like (untested):

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

d3v3时间格式说明符

如果您无法使自动报价生成器执行您想要的操作，则始终可以使用

If you can't get the automatic tick generator to do what you want, you can always specify the exact list of ticks using .tickValues(). You'd want to do this before each render and redraw, so (again, untested):

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);

这篇关于自定义dc.js日期x轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！