javascript - 未捕获的 TypeError : n. getMonth 不是 d3 条形图中的函数

Question

我从通过 d3 读取的 json 文件中收到一个错误，我怀疑与日期对象有关。

我的代码基于以下示例:https://bl.ocks.org/mbostock/1134768

我已将其修改为读取 json 文件，而不是 tsv。该函数应读取 json，然后运行一个名为 type() 的函数，该函数应从 json 中读取日期字符串并将其解析为日期对象。

我在 jsfiddle 创建了一个示例

我的函数如下所示:

var dataURL = 'https://api.myjson.com/bins/x9e87';
var timeOfDay = ["Before 03:00","Before 08:00","Before 10:00", "Before 15:00", "Before 17:00","Before 23:59"];
var parseDate = d3.time.format("%d/%m/%Y").parse;

var margin = {top: 20, right: 50, bottom: 30, left: 20},
    width = 500 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangeRoundBands([0, width]);
var y = d3.scale.linear().rangeRound([height, 0]);
var z = d3.scale.category20();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json(dataURL, function(error, ingestionAmount) {
  if (error) throw error;

  var layers = d3.layout.stack()(timeOfDay.map(function(c) {
    return ingestionAmount.map(function(d) {
      return {x: d.date, y: d[c]};
    });
  }));

  x.domain(layers[0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();

  var layer = svg.selectAll(".layer")
      .data(layers)
      .enter().append("g")
      .attr("class", "layer")
      .style("fill", function(d, i) { return z(i); });

  layer.selectAll("rect")
      .data(function(d) { return d; })
      .enter().append("rect")
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y + d.y0); })
      .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
      .attr("width", x.rangeBand() - 1);

  svg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "axis axis--y")
      .attr("transform", "translate(" + width + ",0)")
      .call(yAxis);

      type();
});

function type(d) {
  d.date = parseDate(d.date);
  timeOfDay.forEach(function(c) { d[c] = +d[c]; });
  return d;
}

我的 json 很简单(完整的文件可以在此处 https://api.myjson.com/bins/x9e87 )

[  
   {  
      "date":"11/11/2017",
      "Before 03:00":31,
      "Before 08:00":5,
      "Before 10:00":44,
      "Before 15:00":18,
      "Before 17:00":98,
      "Before 23:59":12
   },
   {  
      "date":"12/11/2017",
      "Before 03:00":30,
      "Before 08:00":3,
      "Before 10:00":67,
      "Before 15:00":4,
      "Before 17:00":24,
      "Before 23:59":33
   },
{ ///
]

我认为 d3 可能是特定于日期格式的，所以我添加了小时、分钟和秒，但这没有什么区别。我还找到了this Q/A这建议更改 d3 尺度函数。这又不起作用。我正在以 d3 应该期望 "%d/%m/%Y" 的方式解析日期，所以我无法弄清楚问题是什么。

Answer 1

这是一个演示:JS FIDDLE

调用“type”函数的方式不正确。如果您在 https://bl.ocks.org/mbostock/1134768 处调试图表，您将看到数组“crimea”中的每个元素都在 type 中进行解析和格式化。功能。

现在d3.json没有accessor您可以在其中传递 type 的参数就像我们在 d3.csv(function(<filename>, type, callback){}) 中所做的那样，我们必须手动完成。

相关代码:

解析数组的每个元素:

ingestionAmount.forEach(function(d) {
  type(d);
});

希望这有帮助。 :)