如何在 dc.js 中制作带有 X 轴日期的系列图表

Question

我正在使用 dc.js V3.2.1 和交叉过滤器。我正在尝试制作具有日期维度的系列图表，并且在制作带有 X 轴日期和 Y 轴计数的图表时遇到了麻烦。在我的输出中，X 轴没有显示为日期。

我的数据的代理列中需要两个组作为管理员和代理，并且在系列图中有两条线 - 一条作为管理组，另一条作为图表中的代理线。

我的样本数据：

create_time,agent 
2017-01-01,Admin 
2017-01-02,Admin 
2017-01-02,Admin    
2017-01-02,Admin 
2017-01-01,Agent 
2017-01-02,Agent 
2017-01-03,Admin    
2017-01-03,Admin 
2017-01-03,Admin 
2017-01-03,Agent 
2017-02-01,Admin    
2017-02-01,Agent 
2017-02-01,Agent 
2017-02-02,Admin 
2017-02-02,Admin    
2017-02-03,Agent 
2017-02-03,Agent 
2017-03-01,Admin 
2017-03-01,Admin    
2017-03-01,Admin 
2017-03-01,Admin 
2017-03-01,Agent 
2017-03-01,Agent    
2017-03-01,Agent 
2017-04-01,Admin 
2017-04-01,Admin 
2017-04-01,Admin    
2017-04-01,Admin 
2017-04-01,Agent 
2017-04-01,Agent

这是我的代码：

<div id="test"></div>

<script src="./static/lib/js/jquery.min.js"></script>
  <script src="./static/lib/js/bootstrap.min.js"></script>
  <script src="./static/lib/js/crossfilter.js"></script>
  <script src="./static/lib/js/d3.js"></script>
  <script src="./static/lib/js/dc.js"></script>
  <script src="./static/lib/js/queue.js"></script>

<script type="text/javascript">

    var chart = new dc.seriesChart("#test");

    d3.csv("static/data/agent.csv").then(function(agent) {
        var mycrossfilter = crossfilter(agent);
        var all = mycrossfilter.groupAll();

        agent.forEach(function(x) {
               if(x.gender == 'Admin') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

           var minDate = d3.min(agent, function(d){ return d.create_time; });
           var maxDate = d3.max(agent, function(d){ return d.create_time; });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.agent, data.create_time];
            });
            var hwGroup = hwDimension.group().reduceCount();

        chart
         .width(800)
         .height(600)
         .chart(function(c) { 
            return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
         })
         .x(d3.scaleTime().domain([minDate,maxDate]))
         .elasticY(true)
         .brushOn(false)
         .xAxisLabel("Height")
         .yAxisLabel("Count")
         .dimension(hwDimension)
         .group(hwGroup)
         .seriesAccessor(function(d) { return d.key[0];})
         .keyAccessor(function(d) { return +d.key[1]; })
         .valueAccessor(function(d) { return +d.value; })
         .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
            .legendWidth(120).itemWidth(60));

      chart.render();
    });

Answer 1

看起来你做的一切都是正确的，但d3.scaleTime 需要 Date 对象，所以你需要转换数据：

    agent.forEach(function(x) {
      // ...
      x.create_time = new Date(x.create_time);
    });

我还删除了基线插值，因为它不适用于此数据（首先可能是个坏主意）。之后它似乎工作了，日期显示在 X 轴和所有内容中。

Fiddle demo.

格式化刻度

dc.js 使用d3-axis 绘制坐标轴。

使用

chart.xAxis()

检索 X 轴，.tickFormat() 设置轴上的格式，传递 d3.timeFormat。

在上面的小提琴中，

chart.xAxis().tickFormat(d3.timeFormat('%Y-%m-%d'));