Question

我有这个脚本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函数中的数据然后用新数据重绘protovis，我不知道怎么办。在我的情况下，当用户点击菜单时，我从数据库接收新数据并更新数据。但在我更改数据后，我需要重新绘制图像。

我想知道如何重新加载网页以便使用新数据重绘图像。我正在考虑重新加载在POST中传递数据的网页，并在绘制图像之前在Javascript中检索数据。

但是我不确定这个解决方案是否有效以及是否是最佳方式。

Answer 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();
        }
    );
});

如果要重新加载页面，基本上有两个选项。第一种是将数据内联到HTML页面而不是单独加载，然后使用PHP或您选择的服务器端语言将数据替换为用户参数定义的新数据。第二个选项是使您的data.js文件动态化，并在重新加载页面时传入新参数，例如： data.js?option=2。

但实际上，除非您要更改页面上的其他内容，否则最好使用AJAX选项。它在服务器端并不复杂，在客户端只有一点点复杂，它可以为用户节省页面负载。

Answer 2

感谢您的回答。当用户点击菜单而不重新加载页面时，我设法绘制图像并在图像上添加新数据和新数据。我不知道可以在Javascript文件中调用Protovis函数，比如img.render（）。

所以现在我有这个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。

现在，如果我可以从Panel中删除Dots，这将对我的应用程序有用，因为使用此解决方案，如果我更改数据，它会添加新的Dots而不删除之前的。

Protovis使用Javascript更新数据

2 个答案: