4

y値のマッピングに成功しましたが、スタックレイアウトを使用してスタック棒グラフを作成するときに、x値を値の任意のフィールドにマッピングするのに問題があります。私はJavascriptとd3にあまり詳しくありません。だから私はおそらくここで基本的な何かが欠けています。

データの配列の値はのようになり{ "xInit": 0, "yInit": 91 }ます。グラフ内とにマップxInitしたい。xyInity

これは機能します（ブライアンクラークによって提案されました）：

var st = d3.layout
           .stack()
           .values(function (d) { return d.values; })
           .y(function (v, i) { return v.yInit; })
           .out(function (d, y0, y) { d.x = d.xInit; d.y0 = y0; d.y = y; });

これは機能し、x座標はvalue.xInitから取得されます

そして、これはしません：

var st = d3.layout.stack()
           .values(function (d) { return d.values; })
           .y(function (v, i) { return v.yInit; })
           .x(function (v, i) { return v.xInit; });

失敗！ value.xはNaNを返します

次の警告が表示されます。

Unexpected value translate(NaN,0) parsing transform attribute.
Unexpected value NaN parsing x attribute.

stack.x([accessor])ここで間違って使用していますか？では、どのように使用すればよいですか？

詳細

私の問題を示す完全な例は、この要点に基づいたブロックとして利用できます。次のデータに基づいて積み上げ棒グラフを作成したいと思います。

initialData = [ {
          "name": "apples",
          "values": [{ "xInit": 0, "yInit": 91 }, { "xInit": 1, "yInit": 290 }, { "xInit": 2, "yInit": 120 }]
      },{
          "name": "oranges",
          "values": [{ "xInit": 0, "yInit": 9 }, { "xInit": 1, "yInit": 49 }, { "xInit": 2, "yInit": 37 }]
      }];
4

1 に答える 1

2

私はあなたがここで何をしようとしているのか完全には明確ではないので、これは完全な解決策ではありませんが、私はあなたが始めるのを手伝います。

out()この関数を使用して送信データを操作し、x探している座標を取得して、グラフを作成できます。

var st = d3.layout.stack()
        .values(function(d) { return d.values; })
        .out(function(d, y0, y) {d.x = d.xInit; d.y0 = y0; d.y = y; })
        .y(function (v, i) { return v.yInit; });
于 2012-07-16T21:09:46.653 に答える