1

私はこのスクリプト protovis を持っています:

<script type="text/javascript+protovis">
    var w = 600;
    var h = 600;
    var img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./icon/image.gif")
        .title("image");

    img.add(pv.Dot)
        .data(data)
        .left(function(d) d[0] * w)
        .bottom(function(d) d[1] * h)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");

    img.render();
</script>

data1 は Javascript ファイルで宣言されています。

var data = [[.1, .1, 1], [.2, .2, 2], [.3, .3, 3]];

テストすると、3つのドットで画像が表示されます。しかし、たとえばJavascript関数のデータを変更してから、新しいデータでプロトビスを再描画する場合、どうすればよいかわかりません。私の場合、ユーザーがメニューをクリックすると、データベースから新しいデータを受け取り、データを更新します。しかし、データを変更した後、画像を再描画する必要があります。

新しいデータで画像を再描画するために、どうすればウェブページをリロードできるのだろうと思っていました。画像を描画する前に、POST でデータを渡す Web ページをリロードし、Javascript でデータを取得することを考えていました。

しかし、このソリューションが機能するかどうか、それが最善の方法であるかどうかはわかりません。

4

2 に答える 2

1

あなたの質問は少し不明確ですが、これを行うにはいくつかの方法があります。

  • ページをリロードせずにビジュアライゼーションを更新したい場合は、AJAX を使用して新しいデータをロードできます (おそらく jQuery または別のヘルパー ライブラリを使用します)。新しいデータが読み込まれると実行されるコールバック関数で、data変数を新しいデータに割り当ててから、 を呼び出しますimg.render()。たとえば、jQuery を使用すると、次のようになります。

    // assign a handler to run when the user clicks Submit
$('#userForm').submit(function() {
    // get new data based on form input
    $.get('/data.php?' + $(this).serialize(),
        // set the callback function to run with returned data
        function(newData) {
            // set data to new data
            data = newData;
            // refresh
            img.render();
        }
    );
});

  • ページをリロードする場合、基本的に 2 つのオプションがあります。1 つ目は、データを個別にロードするのではなく、HTML ページにインラインで配置し、PHP または任意のサーバー側言語を使用して、データをユーザー パラメータで定義された新しいデータに置き換えることです。2 番目のオプションは、data.jsファイルを動的にし、ページをリロードするときに新しいパラメーターを渡すことですdata.js?option=2。

しかし実際には、ページ上の他のものも変更する予定がない限り、おそらく AJAX オプションを使用する方がよいでしょう。サーバー側ではそれほど複雑ではありませんが、クライアント側では少し複雑になるだけで、ユーザーのページ読み込みを節約できます。

于 2012-01-29T17:44:40.827 に答える
0

ご回答ありがとうございます。ユーザーがページをリロードせずにメニューをクリックすると、画像を描画し、新しいデータで画像に新しいドットを追加することができました。img.render() のように、Javascript ファイルで Protovis 関数を呼び出すことができるとは知りませんでした。

だから今、私はこのprotovisスクリプトを持っています:

<script type="text/javascript+protovis">
    var w = 1286;
    var h = 909;
    img = new pv.Panel()
        .width(w)
        .height(h);

    img.add(pv.Image)
        .url("./plans/img.pnj")
        .title("image");

    function addAndDrawDots(){
        img.add(pv.Dot)
        .data(data1)
        .left(function(d) d[0] * w / 100)
        .top(function(d) d[1] * h / 100)
        .size(function(d) d[2] * 100)
        .fillStyle("rgba(30, 120, 180, .6)")
        .strokeStyle("white");
        img.render();
        }
</script>

次に、data1 変数を設定し、ユーザーがメニューをクリックしたときに呼び出される関数で addAndDrawDots を呼び出すだけです。

パネルからドットを削除できれば、アプリケーションに役立ちます。このソリューションでは、データを変更すると、以前のドットを削除せずに新しいドットが追加されるためです。

于 2012-01-30T12:46:59.283 に答える