d3 嵌套折线图

Question

我是 d3.js 的新手（目前使用的是 d3.v4），我一直在尝试使用 d3.nest 绘制多条线。

这是我的代码：

var color = d3.scaleOrdinal().range(
'#673ab7',
'#9c27b0',
'#e91e63',
'#f44336',
'#ff5722',
'#ff9800',
'#ffc107',
'#ffeb3b',
'#cddc39',
'#8bc34a',
'#4caf50',
'#009688']);

var line = d3.line()
  .x(function(d) { return x(d.day); })
  .y(function(d) { return y(d.temp); });     

d3.csv('/static/data/temp_d3.csv', function(error, data){
  data.forEach(function(d){
    d.day= +d.day,
    d.temp= +d.temp;
  });

  //nest the entries by month
  var dataNest = d3.nest()
    .key(function(d) {return d.month;}).sortKeys(d3.ascending)
    .key(function(d) {return d.day;}).sortKeys(d3.ascending)
    .entries(data);  

  //loop through each symbol/key
  dataNest.forEach(function(d){
    svg.append('path')
    .data([data])
    .attr('class','line')
    .style('stroke',function() {
      return d.color = color(d.key);})
    .attr('d', line);
  });
});//end of read csv

This is the graph I get, which doesn't seem like the points are sorted at all. 我的数据文件格式为

[month,day,temp]
[x , y ,z]
.
.
[x, y, z ]

并且文件没有以任何方式排序。我想按月和日嵌套和排序，并在绘图上有 12 条不同的线（不同颜色）。有人可以帮我吗？谢谢

Answer 1

在我看来，您想要按月嵌套并按日排序，但不像您目前正在做的那样按日嵌套：

  var dataNest = d3.nest()
    .key(function(d) {return d.month;}).sortKeys(d3.ascending)
    //.key(function(d) {return d.day;}).sortKeys(d3.ascending)
    .sortValues (function(a,b) { return a.day > b.day ? 1 : -1; })
    .entries(data)
    ;

由于数据位于 d

的 .values 部分，因此需要稍微不同地调用 line 函数

.attr('d', function(d) { return line (d.values); })

（这当然取决于同一月份和同一天没有多个温度，在这种情况下，您也会在同一天嵌套，但随后需要更多代码来平均温度，这会有点复杂)

为了成为一个完美主义者，我还会将您添加的行代码更改为更像这样的 d3'ish，但这是我在这里使用的 v3 代码（我还没有将自己更新到 v4）

  svg.selectAll("path.line").data(dataNest, function(d) { return d.key; })
    .enter()
    .append('path')
    .attr('class','line')
    .style('stroke',function(d) {
         return color(d.key);})
    .attr('d', function(d) { return line (d.values); })
    ;

d3 嵌套折线图

d3 nested line graph

linegraph

d3.js