Question

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

.., year, ..

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

我想在x-axis中的dc.lineChart上使用今年维度。以下是我使用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）。 / p>

  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轴上使用年字段

1 个答案: