如何在嵌套 D3 中对多个值进行分组以创建多个汇总总和图表？

Question

这是我的数据我的目标是按小时汇总每一行以获得这样的数据

以下..

最终得到这样的东西

到目前为止，我能够汇总一行我一直在想如何完成这项任务。我正在尝试使用汇总

.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )

但它不允许我在一个数据集中使用多个汇总。

https://jsfiddle.net/noxvwhxa/

   var data = [
  {
    "hour":1,
    "line1":2,
    "line2":2
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":1,
    "line2":5
  },
  {
    "hour":1,
    "line1":4,
    "line2":2
  },
  {
    "hour":2,
    "line1":3,
    "line2":1
  },
  {
    "hour":2,
    "line1":3,
    "line2":4
  },
  {
    "hour":3,
    "line1":2,
    "line2":1
  },
  {
    "hour":3,
    "line1":4,
    "line2":2
  },
  {
    "hour":3,
    "line1":2,
    "line2":2
  },
  {
    "hour":4,
    "line1":3,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":4
  },
  {
    "hour":4,
    "line1":4,
    "line2":1
  },
  {
    "hour":4,
    "line1":4,
    "line2":5
  },
  {
    "hour":4,
    "line1":3,
    "line2":1
  }
];

var margin = {top: 8, right: 10, bottom: 2, left: 10},
    width = 300 - margin.left - margin.right,  
    height = 200 - margin.top - margin.bottom,
    top2 = margin.top + 50 ;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var line1 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line1); });  /

var line2 = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.hour); })
    .y(function(d) { return y(d.line2); });

var svg = d3.selectAll("svg")
      .data(data)
    .enter().append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + 50 + margin.top + margin.bottom);


 d3.nest()
.key(function(d) {return d.hour;})
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line1;} )
.rollup(function(d) { function(d) {return d3.sum(d, function(g) { return  g.line2;} )
.entries(data)

Answer 1

您可以 return rollup 函数中包含您感兴趣的两个总和的复杂对象：

var nested = d3.nest()
  .key(function(d) {return d.hour;})
  .rollup(function(d) {
    return {
        line1: d3.sum(d, function(e) { return e.line1; }),
        line2: d3.sum(d, function(e) { return e.line2; })
    };
  })
  .entries(data);

完成演示 here。

如何在嵌套 D3 中对多个值进行分组以创建多个汇总总和图表？

How to group multiple values in nested D3 to create multiple rollup sum chart ?

javascript

svg

d3.js