D3函数解析不工作的日期

Question

我有一个d3可视化效果，可以使用当前稳定版本（3.x），但我想实现Pan & Zoom功能，所以我升级到4.alpha。

随着语法的改变，这会引发很多错误。我更新了变量名称，但是还有一个与下面代码的第二行有关的错误：

function type(d) {
   d.date = formatDate.parse(d.date);
   d.Flux = +d.Flux;
   return d;
}

通过浏览器打开页面源代码，我看到formatDate.parse is not a function.可视化文件当前没有呈现。

我尝试梳理D3 4.alpha documentation，但无济于事。

在代码中，formatDate定义如下：

var formatDate = d3.timeFormat("%d-%b-%y");

我很高兴发布原始代码，大约70行，并且有点hacky：

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 1400// - margin.left - margin.right,
    height = 1400// - margin.top - margin.bottom;
var formatDate = d3.timeFormat("%d-%b-%y");
var x = d3.scaleLinear()
    .range([0, width]);
var y = d3.scaleLinear()
    .range([height, 0]);
var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.Flux); });
var svg = d3.selectAll("#ExoPlanet, #ExoPlanet2").append("svg")
    .attr("width", '90%')
    .attr("height", '70%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed)) ;
function zoomed() {
  var transform = d3.event.transform;
  circle.attr("transform", function(d) {
    return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")";
  });
}

d3.tsv("/FluxTime.tsv", type, function(error, data) {
  if (error) throw error;
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.Flux; }));
    svg.selectAll("dot")
        .data(data)
      .enter().append("circle")
        .attr("r", 2.0)
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.Flux); })
        .attr("stroke", "#CE9A76");
});
function type(d) {
  d.date = formatDate.parse(d.date));
  d.Flux = +d.Flux;
  return d;

}

数据集中前8个条目的屏幕截图：

Answer 1

在D3 3.5中，你可以解析你的方式，设置时间格式......

var formatDate = d3.time.format("%d-%b-%y");

...然后使用这种时间格式进行解析：

d.date = formatDate.parse(d.date);

但是，使用D3 4.0，您必须使用timeParse以不同的方式解析日期：

var parseTime = d3.timeParse("%d-%b-%y");

然后，修改你的访问者功能：

function type(d) {
  d.date = parseTime(d.date);
  d.Flux = +d.Flux;
  return d;
}

Answer 2

api已更改。对我而言，解决方案是：

var parseTime = d3.timeParse("%Y-%m")
parseTime("2018-09")
=> Sat Sep 01 2018 00:00:00 GMT-0400 (Eastern Daylight Time)

如果要采用其他方法，请将Date类转换为字符串：

var formatTime = d3.timeFormat("%Y-%m")
formatTime(new Date)
=> "2020-09"