javascript - 使用 d3.layout.stack() 堆叠多个指标的干法

Question

我正在使用 d3.js Streamgraph显示一段时间内的销售额。然后我有一个过渡期来显示同期的利润。数据如下所示:

var data = [{
    "name": "apples",
    "sales": [{
        "x": 0,
        "y": 941
    }, {
        "x": 1,
        "y": 490
    }],
    "profit": [{
        "x": 0,
        "y": 6
    }, {
        "x": 1,
        "y": 3
    }]
}, {
    "name": "oranges",
    "sales": [{
        "x": 0,
        "y": 344
    }, {
        "x": 1,
        "y": 425
    }],
    "profit": [{
        "x": 0,
        "y": 3
    }, {
        "x": 1,
        "y": 2
    }]
}];

它有效，但我目前正在以一种有点笨拙的方式生成堆叠数据，应用 stack.values两次:

var stack_sales = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) { return d.sales; });

var stack_profit = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) { return d.profit; });

stack_sales(data);
stack_profit(data);

我一直在进入 JavaScript Patterns但看不到执行此操作的 DRY 方法。你能帮忙吗？

Answer 1

一种选择是动态定义值函数:

var stack = d3.layout.stack().offset("wiggle");
["sales", "profit"].forEach(function(metric) {
  stack.values(function(d) { return d[metric]; })(data);
});

另一种选择是转置您的数据，以便指标在外部而系列在内部:

var metrics = [
  {
    "name": "sales",
    "series": [
      {
        "name": "apples",
        "values": [
          {"x": 0, "y": 941}, 
          {"x": 1, "y": 490}
        ]
      }, 
      {
        "name": "oranges",
        "values": [
          {"x": 0, "y": 344}, 
          {"x": 1, "y": 425}
        ]
      }
    ]
  }, {
    "name": "profits",
    "series": [
      {
        "name": "apples",
        "values": [
          {"x": 0, "y": 0}, 
          {"x": 1, "y": 6}
        ]
      }, 
      {
        "name": "oranges",
        "values": [
          {"x": 0, "y": 1}, 
          {"x": 1, "y": 3}
        ]
      }
    ]
  }
];

然后您可以静态访问这些值:

var stack = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) { return d.values; });

metrics.forEach(function(metric) {
  stack(metric.series);
});