自定义dc.js日期x轴

使用条形图：自定义dc.js日期x轴

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天，并自定义格式（天数月，没有星期几）？
谢谢。

来源

2017-09-01 igr

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

来源

2017-09-04 22:32:27 Gordon

是的，分隔滴答设置帮助。目前，出于某种原因，有时候文本与下个月的第一天重叠（自动显示）。我正在测试文字方向是否有助于使用CSS，如http://www.d3noob.org/2013/01/how-to-rotate-text-labels-for-x-axis-of.html中的评论所述。 – igr

是啊，我不认为d3在放置蜱时会根据文本大小。（这将是困难和昂贵的。）旋转文本可以提供帮助，或者如果情况变得更糟，您可以准确计算出您想要的刻度日期并使用['.tickValues（）']（https://github.com/d3 /d3-3.x-api-reference/blob/master/SVG-Axes.md#tickValues）。 – Gordon

有没有办法在本月1日禁用显示？ – igr

自定义dc.js日期x轴

回答

相关问题