0

積み上げ棒グラフを実装しようとしています。私のデータ ソースは JSON 配列です。データは負の場合も正の場合もあります。このリンクを参照しています

http://bl.ocks.org/ZJONSSON/2975320

しかし、問題はここで使われている行列型のようなデータです。お気に入り ：

var data = [[{y:3},{y:6},{y:-3}],
            [{y:4},{y:-2},{y:-9}],
            [{y:10},{y:-3},{y:4}]
           ]

私は同じデータを持っていますが、次のような JSON 配列になっています:

var data = [{x:"abc",  y1:"3",  y2:"4",  y3:"10"},
            {x:"abc2", y1:"6",  y2:"-2", y3:"-3" },
            {x:"abc3", y1:"-3", y2:"-9", y3:"4"}
           ]

私の質問は、JSON 形式のデータを使用してこのグラフを実装する方法です。

4

2 に答える 2

1

リンクした例では、元のデータはバンド タイプごとにグループ化されています。データはセットごとにグループ化されます。つまり、元の各カラー バンドはデータ配列でグループ化されます。データでは、バンドの各スタックは、データ配列内のオブジェクトのグループです。

元のコードを再利用したい場合は、次のようにデータを (90 度) 変換する必要があります。

var initialData = [{x:"abc",  y1:"3",  y2:"4",  y3:"10"},
                   {x:"abc2", y1:"6",  y2:"-2", y3:"-3" },
                   {x:"abc3", y1:"-3", y2:"-9", y3:"4"}]

var data = ["y1","y2","y3"].map(
    function(v){
      return initialData.map(function(d){
        return  {y: +d[v]};
    });
});

その後、元のコードのほとんどをそのまま使用できます。

適応できるもう 1 つの部分は、x スケールのドメインです。

x = d3.scale.ordinal()
        .domain(['abc','abc2','abc3'])
        .rangeRoundBands([margin,w-margin], .1)

グループ名はハードコードされていますが、オブジェクトには "x" として含まれています。

代わりに、各オブジェクトの x 値を各セットのラベルとして自動的に使用できます。

x = d3.scale.ordinal()
    .domain(initialData.map(function(d){return d.x}))
    .rangeRoundBands([margin,w-margin], .1)

いくつかの追加の値を使用して、すべてをまとめる: http://jsfiddle.net/fLMAZ/1/

もう 1 つのオプションは、コードを書き直してデータをそのままバインドすることですが、積み上げ棒グラフがどのように構築されるかを理解し、それを元の JSON に適合させる必要があります。

于 2013-05-09T02:43:24.347 に答える
0

いくつかのオプションがあります。

  1. グラフが好むJSON構造に見えるようにサーバー側からデータを提供することです。
  2. クライアント側で JSON を解析し、新しい JSON を作成できます
  3. JSON で動作するようにグラフ チャートを変更できます。
于 2013-05-09T02:37:33.930 に答える