4

これは Protovis の新参者にとっては非常に困難なプロジェクトですが、消化しやすいチャンクに分割するのを手伝ってもらえませんか?

ここでスケッチしたように、私が構築したいのは「インタラクティブな面グラフ」です。http://i.stack.imgur.com/7bs9W.png

まず第一に、それはデータです...私はExcelで州のデータを持っています:

県 年 10 100 1000 10000
A 1970 2 4 6 3
A 1971 3 6 8 5
B 1970 6 9 12 6
B 1971 4 8 11 8
.... ... . . . .

州と年ごとに、面グラフを描画できるようにしたいと思います。

vis.add(pv.Area) 
    .data(data.ProvinceA[1970]) 
    .bottom(1) 
    .interpolate("basis") 
    .left(function(d) x(d.x)) 
    .height(function(d) y(d.y)) 
    .fillStyle("rgb(21,173,210)") 
    .anchor("top").add(pv.Line) 
    .lineWidth(3);

次に、2 種類のインタラクティブ機能を追加したいと思います。

  1. 州の選択
  2. タイム スライダー

選択チェックボックスとタイム スライダーを組み合わせて、特定の時間に表示される領域を決定します。たとえば、A 州が選択され、年が 1984 の場合、その地域のみが表示されます。タイム スライダーをドラッグすると、州 A の対応する年が表示されます。別の州をオンにすると、エリアがオーバーレイされ、タイム スライダーが移動すると両方のエリアが再描画されます。

プロトビスの質問:

  1. このアプリケーションのデータ (州、年、x、y) をフォーマットするにはどうすればよいですか?
  2. チェックボックスをエリアにバインドするにはどうすればよいですか?
  3. タイム スライダーを実装するにはどうすればよいですか? Protovis 内で、またはグラフの再レンダリングをトリガーするリスナーを備えた外部コンポーネントのように?
4

2 に答える 2

6

データのフォーマット: 最初のステップは、何らかの外部ツールを使用して JSON に変換することです (これにはGoogle Refineがとても気に入っていますが、これだけで十分な場合は非常に大きなツールです。Mr . Data Converterを試してみてください。汚いオプション）。これらのツールは、おそらく次のような JSON オブジェクトとしてデータを提供します。

`[{"Province":"A", "Year":"1970", "10":2, "100":4, "1000":6, "10000":3}, ...]`

データを JSON として利用できるようになったら、それを vis の形にします。各 pv.Area に値の配列を渡したいと思うでしょう-あなたの説明から、[10、100、1000、10000]の値が必要なようです。Protovis には、データを操作するためのツールがたくさんあります。pv.Nest オペレーターを参照してください。これにアプローチする方法はたくさんあります-私はこれを行うかもしれません:

data = pv.nest(data)
    .key(function(x) {return x.Province})
    .key(function(x) {return x.Year})
    .rollup(function(v) {
        return [v[0]['10'], v[0]['100'], v[0]['1000'], v[0]['10000']];
    });

次のようなオブジェクトが得られます。

{ 
    A: {
        1970: [2,4,6,3]
        // ...
    },
    // ...
}

これにより、インターフェイス要素が設定されます。チェックされた州の配列と現在の年をグローバル変数に保持します。

var currentProvinces = ['A', 'B', ...];
var currentYear = 1970;

これらの変数を参照するように領域を設定します。

// a containing panel to help with layout and data
var panel = vis.add(pv.Panel)
    .data(function() currentProvinces); // making this a function allows it to 
                                        // be re-evaluated later
// the area itself
var area = panel.add(pv.Area)
    .data(function(province) data[province][currentYear]);
    // plus more area settings as needed

ここで、他のライブラリを使用します。私は jQuery が好きで、スライダーに jQuery UI を使用しています。インターフェイス要素を作成します。各要素の onchange 関数は、対応するグローバル変数を設定して呼び出すだけですvis.render()(ルート パネルが呼び出されると仮定しますvis)。これは非常に単純なはずです。jQuery UI を使用してタイム スライダーを考えているものと非常によく似た Protovis の例については、こちらを参照してください。

于 2011-02-01T06:59:19.910 に答える