Protovis使用Javascript更新数据

我有一个脚本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>

当我测试，我有我的图像与3点。但我不知道如何做，例如，如果我更改Javascript函数中的数据，然后用新数据重新绘制protovis。 在我的例子中，当用户单击菜单时，我从数据库接收新数据并更新数据。但在我改变数据后，我需要重新绘制图像

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

---

但我不确定这个解决方案是否有效，以及它是否是实现这一目标的最佳方式

您的问题有点不清楚，但有几种方法可以做到这一点：

• 如果希望在不重新加载页面的情况下更新可视化，可以使用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选项。服务器端的问题并不复杂，客户端的问题只稍微复杂一点，这样可以节省用户的页面负载。

您的问题有点不清楚，但有几种方法可以做到这一点：

• 如果希望在不重新加载页面的情况下更新可视化，可以使用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选项。服务器端不再复杂，客户端只稍微复杂一点，它为用户节省了页面负载。

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

现在我有了这个原型脚本：

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

var w=1286；
var h=909；
img=新光伏板（）
.宽度（w）
.高度（h）；
图像添加（pv.图像）
.url（“./plans/img.pnj”）
.名称（“图像”）；
函数addAndDrawDots（）{
图像添加（pv.Dot）
.数据（数据1）
.左（功能（d）d[0]*w/100）
.顶部（功能（d）d[1]*h/100）
.尺寸（功能（d）d[2]*100）
.fillStyle（“rgba（30、120、180、6）”）
.strokeStyle（“白色”）；
img.render（）；
}

然后我只需要设置data1变量，并在用户单击菜单时调用的函数中调用addAndDrawDots

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

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

现在我有了这个原型脚本：

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

var w=1286；
var h=909；
img=新光伏板（）
.宽度（w）
.高度（h）；
图像添加（pv.图像）
.url（“./plans/img.pnj”）
.名称（“图像”）；
函数addAndDrawDots（）{
图像添加（pv.Dot）
.数据（数据1）
.左（功能（d）d[0]*w/100）
.顶部（功能（d）d[1]*h/100）
.尺寸（功能（d）d[2]*100）
.fillStyle（“rgba（30、120、180、6）”）
.strokeStyle（“白色”）；
img.render（）；
}

然后我只需要设置data1变量，并在用户单击菜单时调用的函数中调用addAndDrawDots

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