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>

data1 объявлен в файле Javascript:

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

Когда я проверяю, у меня есть изображение с 3 точками. Но я не знаю, как это сделать, если, например, я изменю данные в функции Javascript, а затем перерисую прототип с новыми данными. В моем случае, когда пользователь щелкает меню, я получаю новые данные из базы данных и обновляю данные. Но после того, как я изменил данные, мне нужно перерисовать изображение.

Мне было интересно, как я могу перезагрузить веб-страницу, чтобы перерисовать изображение с новыми данными. Я думал перезагрузить веб-страницу, передав данные в POST, и получить данные в Javascript перед рисованием изображения.

Но я не уверен, сработает ли это решение и будет ли это лучшим способом сделать это.


javascript protovis
person Quentin D    schedule 27.01.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ваш вопрос немного неясен, но есть несколько способов сделать это:

  • Если вы хотите обновить визуализацию без перезагрузки страницы, вы можете использовать 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. Это не сложнее на стороне сервера, только немного сложнее на стороне клиента, и это избавляет вашего пользователя от загрузки страницы.

person nrabinowitz    schedule 29.01.2012

arrow_upward
0
arrow_downward

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

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

person Quentin D    schedule 30.01.2012