1

D3 APIリファレンスとStackOverflowのこの質問に示されているように、値アクセサーを使用してレイヤーごとに追加のデータを含むD3ストリームグラフチャートを作成しようとしています。

タイトルは正常に追加されますが、値が追加されていないようです。何がうまくいかないかについてのアイデアはありますか？

私はd3を初めて使用するので、簡単だと確信しています。コードは以下のとおりです。

var layers = [
  {
    "name": "apples",
    "values": [
      { "x": 0, "y":  91},
      { "x": 1, "y": 290}
    ]
  },
  {  
    "name": "oranges",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 49}
    ]
  }
];

var     m = 2; // number of samples per layer
var width = 960,
    height = 500,
    mx = m - 1,
    my = 350;

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

var area = d3.svg.area()
    .x(function(d) { 
        return d.x * width / mx; 
    })
    .y0(function(d) { 
        return height - d.y0 * height / my; 
    })
    .y1(function(d) { 
        return height - (d.y + d.y0) * height / my; 
    });

var vis = d3.select("#chart")
  .append("svg")
    .attr("width", width)
    .attr("height", height);

vis.selectAll("path")
    .data(stack(layers))
  .enter().append("path")
    .attr("d", area)
  .append("title")
    .text(function(d) { return d.name; });
4

1 に答える 1

7

スタックレイアウトは、指定した値アクセサーを認識しますが、エリアジェネレーターは認識しません。したがって、次のように、エリアジェネレータでd.valuesはなくパスする必要があります。d

.attr("d", function(d) { return area(d.values); })
于 2012-06-14T16:09:39.923 に答える