Question

我想使用D3.js创建一个多线图。这是我的示例csv数据：

for child in flowbox.get_selected_children():
    print child.get_index()

这是我的代码段。但是我一直看到像d这样的错误不是预期的数字（如标题所示）。有人可以指出我吗？

此外，我觉得我解析数据的方式很难看（两个for循环）。欢迎任何建议。

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

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

D3多线图 - 错误：<path>属性d：预期数字，＆＃34; MNaN，NaNLNaN，NaNC ...＆＃34;

1 个答案: