1

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を2回適用して、スタックされたデータをややハムフィストの方法で生成しています:

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 パターンに取り掛かっていますが、これを行うための DRY の方法がわかりません。手伝ってくれますか？

4

1 に答える 1

2

1 つのオプションは、values 関数を動的に定義することです。

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);
});
于 2012-08-19T17:49:47.657 に答える