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部分

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

（这当然取决于在同一个月和一天没有多个温度，在这种情况下你也会在一天中筑巢但是需要更多的代码来平均温度，这会更复杂一些）

要成为一个简化者，我也会更改你添加的行代码更多d3＆＃39; 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嵌套线图

1 个答案: