如何为日期设置 dc.js x 轴

Question

我有一个包含 2 列的 CSV 文件，第一列有一些日期，第二列有一些值。

如何初始化 x 轴以显示日期？

Answer 1

IMO 解决你的问题包括两部分：

正在将数据中的日期解析为 dc 可管理格式
对图表进行编码

要解析日期，您需要在脚本中注入 csv 文件后使用这样的函数：

    var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S-07:00").parse;

data.forEach(function(d) {
        d.TxnDate = parseDate(d.TxnDate);
    });

请注意，根据您的数据，解析标准可能会有所不同，在这种情况下，请检查此 time formatting article

对于第二部分，这是一个示例图表定义，但在此之前您需要定义两个新变量，它们将用作我们 X 轴的起点和终点。在定义维度和组之后，像这样定义它们：

    var minDate = transactionDate.bottom(1)[0].TxnDate;
var maxDate = transactionDate.top(1)[0].TxnDate;

您的图表代码如下：

timeChart
.width(650)
.height(250)
.transitionDuration(1000)
.brushOn(false)
.dimension(transactionDate) //your dimension created from crossfilter
.group(fakeTxnDateGroup) // your group
.elasticY(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.x(d3.time.scale().domain([minDate,maxDate])) //these are the dates we created before this step so that the scale fits according to our data
.yAxis().tickFormat(d3.format("s"));

希望对您有所帮助。如果没有，请留下 js fiddle。谢谢！

如何为日期设置 dc.js x 轴

How to set up dc.js x axis for dates

charts

dc.js