javascript - 使用 d3 对数据进行分组

Question

我尝试重现 this example使用 d3 的多线图。我声明我对 d3 知之甚少，我才刚刚开始使用它。

我会得到一个图表，其中 x 轴为日期(1995、1996、...、2010)，y 轴为 0 到 3000 之间的数值。代表 csv 中各种数据类别的行。

这是我的部分代码:

// Get the data
d3.csv("./data/df_out.csv", function(error, data) {
    data.forEach(function(d) {
      d.year = d.year; //parseDate(d.year);
      d.value = +d.value;
    });

    // Scale the range of the data
    x.domain([1995, 2010]);
    y.domain([0, 3000]);

    // Nest the entries by death
    var dataNest = d3.nest()
        .key(function(d) { return d.death;})
        .entries(data);

    // Loop through each symbol / key
    dataNest.forEach(function(d) {
        svg.append("path")
            .attr("class", "line")
            .attr("d", valueline(d.values)); 
    });     
});

当我运行它时，出现错误:

错误:属性 d:预期数字，“MNaN，NaNLNaN，NaNL ...”.attrConstant @ d3.js:663(匿名函数)@ d3.js:962d3_selection_each @ d3.js:968d3_selectionPrototype.each @ d3 .js:961d3_selectionPrototype.attr @d3.js:652(匿名函数) @script.js:56(匿名函数) @script.js:53(匿名函数) @d3.js:1996event @d3.js:504respond @d3 .js:1949

问题是nest函数，我不明白为什么。

有人可以帮我吗？

这里是完整的代码:http://plnkr.co/edit/kiU1KwdvsC7e1rrjAuCM?p=preview .

非常感谢。

Answer 1

首先你的 CSV 不正确:

",""year"",""death"",""value"""
"1,2003,""Acute poliomyelitis"",0"
"2,2006,""Acute poliomyelitis"",0"
"3,2007,""Acute poliomyelitis"",0"
"4,2008,""Acute poliomyelitis"",0"
"5,2009,""Acute poliomyelitis"",0"
"6,2010,""Acute poliomyelitis"",0"
"7,1995,""Acute poliomyelitis"",0"
"8,1996,""Acute poliomyelitis"",0"
"9,1997,""Acute poliomyelitis"",0"
"10,1998,""Acute poliomyelitis"",0"
"11,1999,""Acute poliomyelitis"",0"
"12,2000,""Acute poliomyelitis"",0"
"13,2001,""Acute poliomyelitis"",0"
"14,2002,""Acute poliomyelitis"",0"

应该是(去掉双引号)

,year,death,value
1,2003,Acute poliomyelitis,0
2,2006,Acute poliomyelitis,0
3,2007,Acute poliomyelitis,0
4,2008,Acute poliomyelitis,0
5,2009,Acute poliomyelitis,0
6,2010,Acute poliomyelitis,0
7,1995,Acute poliomyelitis,0
8,1996,Acute poliomyelitis,0
9,1997,Acute poliomyelitis,0
10,1998,Acute poliomyelitis,0
11,1999,Acute poliomyelitis,0
12,2000,Acute poliomyelitis,0
13,2001,Acute poliomyelitis,0
14,2002,Acute poliomyelitis,0

其次，

您需要像这样解析日期:

data.forEach(function(d) {
  d.year = parseDate(d.year);
  d.value = +d.value;
});

第三

像这样设置 x 域:

x.domain(d3.extent(data, function(d){return d.year}));

最后，在传递行数据之前，对数据 w.r.t. 进行排序。年。

// Loop through each symbol / key
dataNest.forEach(function(d, i) {
  d.values = d.values.sort(function(a,b){return a.year -b.year});//sort by year
  svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(d.values))
        .style("stroke", color(i)) ; 
}); 

工作代码here