Protovis使用Javascript更新数据

Question

我有这个脚本协议：

<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：

//当用户点击Submit $(‘#userForm’).submit($.get(){ //根据表单输入获取新数据$.get('/data.php?‘+ $(this).serialize() )，//设置回调函数运行返回数据函数(NewData){ //将数据设置为新数据= 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。

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