Javascript D3多折线图-错误：<；路径>；属性d：预期的数字；MNaN、南加州南部和x2026&引用；

我正在尝试使用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

这是我的代码片段。然而，我一直看到像d这样的错误不是预期的数字（如标题所示）。谁能给我指一下吗

而且我觉得我解析数据的方式很难看（两个代表循环）。欢迎提出任何建议

// 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);

});

//设置画布/图形的尺寸
var保证金={
前30名，
右:20,，
底数：30，
左：50
},
宽度=800-边距.左-边距.右，
高度=500-margin.top-margin.bottom；
//解析日期/时间
var parseDate=d3.time.format（“%b%Y”）.parse；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）.scale（y）
.东方（“左”）；
var line=d3.svg.line（）
.插入（“基础”）
.x（功能（d）{
返回x（d.日期）；
})
.y（功能（d）{
返回y（d值）；
});
//添加svg画布
var svg=d3。选择（“d3折线图”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
d3.csv（“test.csv”），函数（错误、数据）{
var-res=[]；
var cols=d3.keys（数据[0]）
.过滤器（功能（键）{
返回键；
});
对于（var j=0；j

首先，在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

  // 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;
  })]);

提供已排序的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;

因为您的日期格式为2016年4月26日

第三,

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

因此，与此相反：

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

  // 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

数组是数组中的一个数组，因此需要在此处进行处理

---

工作代码

您的预期输出是什么？每个符号对应一行？你看到了吗，它几乎和你的数据一样？@马克：是的，我希望每列有一行。我确实在看样品。。。但是

函数类型（d，u，columns）{d.date=parseTime（d.date）；for（vari=1，n=columns.length，c；i

把我搞糊涂了。。。第二个参数在我的浏览器中不断弹出错误。非常感谢！你的答案很清楚。非常感谢！！