Protovis обновляет данные с помощью Javascript

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, а затем перерисую протовис с новыми данными. В моем случае, когда пользователь щелкает в меню, я получаю новые данные из базы данных и обновляю данные. Но после того, как я изменил данные, мне нужно перерисовать изображение.

Мне было интересно, как я могу перезагрузить веб-страницу, чтобы перерисовать изображение с новыми данными. Я думал о перезагрузке веб-страницы с передачей данных в 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

Спасибо за ваш ответ. Мне удалось нарисовать изображение и добавить новые точки на изображение с новыми данными, когда пользователь щелкает меню без перезагрузки страницы. Я не знал, что можно вызвать функцию Protovis в файле Javascript, например, 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 в функции, вызываемой, когда пользователь нажимает на меню.

Теперь для моего приложения будет полезно, если я смогу удалить точки из панели, потому что с этим решением, если я изменю данные, он добавит новые точки, не удаляя предыдущие.