dc.js 中折线图的 x 轴中将数字显示为时间

Question

我有一个 csv 文件，其中列 (arr_time_) 表示此特定交易发生的 15 分钟时间段。

此列中的值范围为 0 to 28，每个值代表从早上 6 点开始的 15 分钟时间段。所以 0 表示 6 am，1 表示 6:15 am，等等。这就是我的折线图现在的样子：

我的这个折线图的 dc.js 代码是这样的：

timeChart
    .width(800)
    .height(230)
    .margins({top: 10, right: 50, bottom: 30, left: 30})
    .dimension(arrivalTimeDim)
    .group(arrivalPer15min, "Observed")
    // .ordinalColors(["orange"])
    // .stack(histArrivalPer15min, "historical")
    .transitionDuration(500)
    .renderArea(true)
    // .elasticX(true)
    .elasticY(true)
    .x(d3.scale.linear().domain([minDate, maxDate+.5]))//minDate=0, maxDate=28
    .renderHorizontalGridLines(true)
    // .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
    .xAxisLabel("Time")
    .yAxis().ticks(4);
    // .xAxis().ticks(5);

我想更改此图表中的 xAXis，使其显示 6, 6:15, ...。我试过使用 .range 和 xUnits 但是，可能是因为我做错了，它没有用。我该如何解决这个问题？

Answer 1

为此，您需要在数据集中创建日期：

  var today = new Date(2015, 12, 25);//sample date for which the data is a part i am considering it to to be 25 Dec 2015 
  var hrs = 6;//since you want to start from 6 in the morning
  experiments.forEach(function(x) {
    x.Speed = +x.Speed;
    //making the Date data
    x.Date = new Date(today.getTime()+ hrs*60*60*1000)
    hrs +=0.25;//after 15 minutes data
  });

//this will calculate the max min for the date
var extent = d3.extent(experiments, function(d){return d.Date});

最后像下面这样设置轴：

  chart
    .width(768)
    .height(480)
    .x(d3.time.scale().domain(extent))
    .xUnits(d3.time.minute)

工作代码示例here。

dc.js 中折线图的 x 轴中将数字显示为时间

Show numbers as times in xAxis of linechart in dc.js

d3.js

dc.js