D3 多折线图 - 错误：<路径> 属性 d：预期数字，“MNaN,NaNLNaN,NaNC...”

Question

我正在尝试使用 D3.js 创建一个多折线图。这是我的示例 csv 数据：

A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

这是我的代码 sn-p。但是我一直看到错误，例如 d 不是预期的数字（如标题所示）。谁能指点一下？

我也觉得我解析数据的方式很丑（两个 for 循环）。欢迎提出任何建议。

// Set the dimensions of the canvas / graph
var margin = {
    top: 30,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 800 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%b %Y").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
  .orient("bottom");

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

var line = d3.svg.line()
  .interpolate("basis")
  .x(function (d) {
    return x(d.date);
  })
  .y(function (d) {
    return y(d.value);
  });

// Adds the svg canvas
var svg = d3.select("#d3-line-chart")
  .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 + ")");

//get the data
d3.csv("test.csv", function (error, data) {
  var res = [];
  var cols = d3.keys(data[0])
    .filter(function (key) {
      return key;
    });

  for (var j = 0; j < cols.length - 1; j++) {
    var col = cols[j];
    var row = [];
    for (var i = 0; i < data.length; i++) {
      row.push({
        symbol: col,
        date: data[i]["date"],
        value: +data[i][col]
      });
    }
    res.push(row);
  }

  // Scale the range of the data
  x.domain(d3.extent(res, function (d) {
    return d.date;
  }));
  y.domain([0, d3.max(res, function (d) {
    return d.value;
  })]);


  svg.selectAll(".line")
    .data(res)
    .enter().append("path")
    .attr("class", "line")
    .attr("d", line);

  // Add the X Axis
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

  // Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

});

Answer 1

首先，在 CSV 中提供按日期排序的数据：

而不是这个：

A,B,C,D,E,F,G,date
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

提供排序后的 CSV：

A,B,C,D,E,F,G,date
51834,69917.12,5449,4902,62990,114296,124833,4/24/16
53831,72169.87,54219,72555,63466,115312,126390,4/26/16
53578,71718.19,51085,69152,63370,115061,125949,5/3/16
54637,73016.92,58535,77379,63090,113216,125261,6/14/16
54801,73072.4,57997,75674,63090,113216,125261,6/27/16
53031,70901.11,5976,5111,62388,111626,123198,7/10/16
51679,68897.14,6021,5421,61514,110330,121972,7/24/16

其次：

您提供的日期解析器不正确：

var parseDate = d3.time.format("%b %Y").parse;

应该是这样的：

var parseDate = d3.time.format("%m/%d/%Y").parse;

因为您的日期格式为 ,4/26/16。

第三，

你计算 x 和 y 域范围的方式是错误的：

所以不要这样：

  // Scale the range of the data
  x.domain(d3.extent(res, function (d) {
    return d.date;
  }));
  y.domain([0, d3.max(res, function (d) {
    return d.value;
  })]);

应该是：

  x.domain(d3.extent(data, function (d) {
    return parseDate(d.date);
  }));
  y.domain([0, d3.max(res, function (d) {
    return d3.max(d, function(d2){console.log(d2);return d2.value;});
  })]);

原因：您创建的 res 数组是数组中的数组，因此需要在此处进行处理。

工作代码here