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

Question

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

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

我的示例数据：

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需要日期对象，所以你需要转换数据：

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

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

Fiddle demo.

格式化刻度

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

使用

chart.xAxis()

检索X轴，.tickFormat() to set the format on the axis, passing a d3.timeFormat。

在上面fiddle,

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

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

How to make a series chart with date in X-axis in dc.js

crossfilter

dc.js

格式化刻度