在 dc.js 中的折线图的 x 轴上使用年份字段

Question

我在使用 d3 实现数据解析器时遇到了问题。我的 csv 数据集中有一个如下所示的字段：

.., year, ..

.., 1987, ..
.., 1988, ..
.., 1989, ..
.., 1990, ..

我想在 dc.lineChart 的 x-axis 上使用今年的维度。以下是我使用 crossfilter.js

的实现

var ndx = crossfilter(data);    
var yearDim  = ndx.dimension(function(d) {return d.year});

目前我正在使用以下解决方案，如您所见，它没有达到想要的结果：

data.forEach(function(d) {
   d.year = parseInt(d.year);
});
...
...
yearChart
   .width(870)
   .height(500)
   .dimension(yearDim)
   .group(numberPerYear)
   .x(d3.scaleLinear().domain([1987,2015]))
   .elasticY(true)
   .controlsUseVisibility(true)
   .yAxis().ticks(5);

然而，这导致在 x 轴上有 integer。我也尝试为日期创建一个解析器，但我不知道如何在之后传递参数，而且我不确定这是否是正确的解决方案，因为我在网上找到的功能已被弃用（v.3）。

  var dateFormatSpecifier = '/%Y';
  var dateFormat = d3.timeFormat(dateFormatSpecifier);
  var dateFormatParser = d3.timeParse(dateFormatSpecifier);

Answer 1

您应该使用 d3.scaleTime() 而不是 d3.scaleLinear()。您可以简单地将域的开始和结束日期设置为 00:00：

.x(d3.scaleTime().domain([
    new Date("January 1, 1987 00:00:00"),
    new Date("January 1, 2015 00:00:00")
]));

记得将 d.year 转换为 Date 对象：

var yearDim  = ndx.dimension(function(d) { return new Date(d.year); });

在 dc.js 中的折线图的 x 轴上使用年份字段

Using a year-field on the x-axis of a lineChart in dc.js

crossfilter

dc.js